[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69affa487f08819183780a4c52be6b54","versionInt","title","Dofus Huppermage 3 5 Interactive Guide","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n Search,\n Sparkles,\n Flame,\n Droplets,\n Mountain,\n Wind,\n Swords,\n Shield,\n Zap,\n BookOpen,\n Layers,\n RotateCcw,\n Target,\n CheckCircle2,\n Filter,\n} from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\n\nconst elements = [\n {\n key: \"fire\",\n name: \"Fire\",\n icon: Flame,\n identity:\n \"Mid-range pressure, anti-heal, and strong switching utility to place enemies exactly where you need them.\",\n strengths: [\n \"Strong switch-based positioning\",\n \"Useful against sustain\",\n \"Reliable pressure at mid range\",\n \"Good in structured PvP focus turns\",\n ],\n weaknesses: [\"Less slippery than Air\", \"Can feel linear if played too purely\"],\n bestFor:\n \"Players who want straightforward threat, anti-heal utility, strong positioning through switches, and reliable follow-up damage.\",\n gradient: \"from-red-500 via-rose-500 to-red-700\",\n iconBg: \"from-red-100 to-rose-100\",\n panelBg: \"from-red-50 via-rose-50 to-red-100\",\n border: \"border-red-200\",\n badge: \"from-red-500 to-red-700\",\n },\n {\n key: \"water\",\n name: \"Water\",\n icon: Droplets,\n identity:\n \"The shortest-ranged element, but also the one that deals the most damage, with many spells that do not require line of sight.\",\n strengths: [\n \"Highest damage element\",\n \"Many Water spells do not require line of sight\",\n \"Excellent focus-target pressure\",\n \"Strong payoff when access is secured\",\n ],\n weaknesses: [\n \"Shorter range than the other elements\",\n \"Can be clunkier in early PvM\",\n \"Needs cleaner access / map control\",\n ],\n bestFor:\n \"Players who like punishing overextension, abusing no-line-of-sight angles, and helping the team collapse on one target.\",\n gradient: \"from-blue-400 via-sky-500 to-blue-700\",\n iconBg: \"from-blue-100 to-sky-100\",\n panelBg: \"from-blue-50 via-sky-50 to-indigo-50\",\n border: \"border-blue-200\",\n badge: \"from-blue-500 to-blue-700\",\n },\n {\n key: \"earth\",\n name: \"Earth\",\n icon: Mountain,\n identity:\n \"The longest-ranged element and the one that deals the least damage, focused on control, pushback, and being the easiest entry path into the class.\",\n strengths: [\n \"Longest-ranged element\",\n \"Strong map control\",\n \"Comfortable in many PvM maps\",\n \"Simple to pilot well\",\n ],\n weaknesses: [\n \"Lowest damage element\",\n \"Less explosive than specialized multi lines\",\n \"Can feel more technical than it looks\",\n ],\n bestFor:\n \"Players who want the easiest modern Huppermage entry path, with long-range control, pushback utility, and solid battlefield structure.\",\n gradient: \"from-stone-500 via-amber-700 to-yellow-900\",\n iconBg: \"from-stone-100 to-amber-100\",\n panelBg: \"from-stone-50 via-amber-50 to-yellow-50\",\n border: \"border-amber-300\",\n badge: \"from-stone-500 to-amber-800\",\n },\n {\n key: \"air\",\n name: \"Air\",\n icon: Wind,\n identity:\n \"Mobility, hit-and-run tempo, and line-breaking angles. Air often wants to go into the middle, create value, and get out again by the end of the turn.\",\n strengths: [\n \"Excellent hit-and-run turns\",\n \"Strong repositioning value\",\n \"Can dive into the middle and still get out safely\",\n ],\n weaknesses: [\n \"Can tempt shallow autopilot play\",\n \"Needs discipline to convert mobility into real payoff\",\n ],\n bestFor:\n \"Players who already understand Huppermage basics and want a fluid, Xelor-like hit-and-run path that scales hard with positioning skill.\",\n gradient: \"from-emerald-400 via-green-500 to-lime-500\",\n iconBg: \"from-emerald-100 to-green-100\",\n panelBg: \"from-emerald-50 via-green-50 to-lime-50\",\n border: \"border-green-200\",\n badge: \"from-emerald-500 to-lime-600\",\n },\n];\n\nconst combinations = [\n {\n pair: \"Fire + Water\",\n short: \"Bruiser / berserker sustain\",\n combo: \"Removes 60 Dodge when both elements are applied.\",\n style: \"Close-range pressure with real sustain and strong setup-to-payoff turns.\",\n strengths: [\n \"Very strong tackling and stickiness\",\n \"Great setup for big Glacier AoE after Fire states\",\n \"Strong sustain through Tribute and Contribution shield interactions on Fire states\",\n \"Water states give Power to the Huppermage, increasing pressure further\",\n \"Can brawl in melee but still threaten at range with Fire spells\",\n ],\n notes:\n \"One of the strongest aggressive hybrid builds. It lets Huppermage play like a bruiser that can commit, survive, and still disengage when needed. Compared with Water/Air, this build is more front-to-back: you pressure through the enemy line and stick to targets rather than specifically wanting enemies all around you.\",\n gradient: \"from-red-600 via-fuchsia-500 via-violet-500 to-blue-500\",\n border: \"border-fuchsia-200\",\n panelBg: \"from-red-50/80 via-fuchsia-50/70 to-blue-50/80\",\n badge: \"from-red-600 via-fuchsia-500 to-blue-500\",\n },\n {\n pair: \"Earth + Air\",\n short: \"Classic range build\",\n combo: \"The elemental combination steals 3 Range from enemies.\",\n style: \"Safest long-range Huppermage style, focused on distance control, mobility, and map safety.\",\n strengths: [\n \"The rangiest Huppermage hybrid build\",\n \"Excellent for attacking from far and playing safe\",\n \"Strong escape patterns thanks to Air mobility\",\n \"Earth spells help create space by pushing enemies away\",\n \"Very reliable for kiting and keeping initiative in longer fights\",\n ],\n notes:\n \"This is the classic control/range setup. Slightly less brute-force than some other hybrids, but one of the most stable and oppressive when piloted well.\",\n gradient: \"from-stone-600 via-emerald-500 to-green-300\",\n border: \"border-emerald-200\",\n panelBg: \"from-stone-50/80 via-emerald-50/70 to-green-50/80\",\n badge: \"from-stone-600 via-emerald-500 to-green-400\",\n },\n {\n pair: \"Fire + Earth\",\n short: \"Safe damage / vulnerability setup\",\n combo: \"Fire and Earth apply a 15% bonus damage taken effect on enemies.\",\n style: \"A high-pressure ranged hybrid that keeps strong damage output while remaining relatively safe.\",\n strengths: [\n \"Very good damage potential\",\n \"Still has a lot of range, even if slightly less than Earth/Air\",\n \"Lets you play safer than a pure melee bruiser style\",\n \"Strong for setting up allied or personal burst through vulnerability\",\n \"Fire-side mobility still gives flexible repositioning\",\n ],\n notes:\n \"Compared with Earth/Air, this build gives up a bit of range for more direct damage pressure and stronger offensive payoff.\",\n gradient: \"from-red-600 via-orange-500 to-amber-700\",\n border: \"border-orange-200\",\n panelBg: \"from-red-50/80 via-orange-50/70 to-amber-50/80\",\n badge: \"from-red-600 via-orange-500 to-amber-700\",\n },\n {\n pair: \"Water + Earth\",\n short: \"Crowd control / MP removal\",\n combo: \"This combination removes Movement Points from enemies.\",\n style: \"The best crowd-control hybrid, usually most effective with dedicated MP reduction setups.\",\n strengths: [\n \"Best elemental pair for crowd control\",\n \"Can be built specifically around MP removal\",\n \"Creates strong lockdown turns on key targets\",\n \"Uses Huppermage’s furthest and closest elements together\",\n \"Combines lower and higher damage tendencies for flexible routing\",\n ],\n notes:\n \"This is more specialized than other hybrids and really shines when built intentionally around control rather than generic damage.\",\n gradient: \"from-blue-600 via-teal-500 to-amber-700\",\n border: \"border-teal-200\",\n panelBg: \"from-blue-50/80 via-teal-50/70 to-amber-50/80\",\n badge: \"from-blue-600 via-teal-500 to-amber-700\",\n },\n {\n pair: \"Water + Air\",\n short: \"Tanky bruiser / anti-damage\",\n combo: \"Applies a 15% damage penalty to enemies when both elements are combined.\",\n style: \"One of the tankiest Huppermage hybrids, built around diving into groups, disrupting damage, and healing back through rotation.\",\n strengths: [\n \"Alongside Fire/Water, one of the tankiest bruiser hybrids\",\n \"Has the two biggest AoEs in the Huppermage kit\",\n \"Strong mid-pack play: jump into enemies, disrupt them, and survive\",\n \"Can pull enemies with Glacier and then use Flurry to reduce the damage of multiple enemies\",\n \"Pairs extremely well with Runification healing and Contribution AP gain / imprint extension\",\n ],\n notes:\n \"This build is excellent for messy fights and clustered enemy teams. Unlike Fire/Water, where you usually play more front-to-back, Water/Air often wants enemies around you so the build can fully exploit its AoE disruption, anti-damage effect, and healing loops. A signature sequence is to jump into the middle, pull enemies with Glacier, use Flurry to cut the damage of everyone hit, cast Runification to heal, then use Contribution and get 2 AP back because the enemies are in Air states, and then use Runification again since Contribution now also imprints. It feels like controlled chaos: dive in, debuff everyone, heal, gain AP, and keep the turn going.\",\n gradient: \"from-blue-600 via-cyan-400 to-emerald-400\",\n border: \"border-cyan-200\",\n panelBg: \"from-blue-50/80 via-cyan-50/70 to-emerald-50/80\",\n badge: \"from-blue-600 via-cyan-400 to-emerald-400\",\n },\n {\n pair: \"Fire + Air\",\n short: \"Maximum mobility\",\n combo: \"This combination removes Action Points from enemies.\",\n style: \"Hyper-fluid movement build that lets you go into the middle of the enemies, create pressure there, and get out again before the turn ends.\",\n strengths: [\n \"Highest mobility among Huppermage hybrids\",\n \"Excellent for going in and out of enemy zones\",\n \"Can cross the map very easily while still dealing meaningful damage\",\n \"Great for aggressive repositioning and chase patterns\",\n \"Hard for enemies to pin down when played cleanly\",\n ],\n notes:\n \"This is the tempo build. It plays a bit like a Xelor in spirit: go in, create pressure in the middle of the fight, then get out again before the enemy can punish your position.\",\n gradient: \"from-red-600 via-orange-500 via-lime-400 to-green-400\",\n border: \"border-lime-200\",\n panelBg: \"from-red-50/80 via-orange-50/70 to-green-50/80\",\n badge: \"from-red-600 via-orange-500 to-green-400\",\n },\n];\n\nconst polarityVsConvectionGuide = {\n title: \"When to use Polarity vs Convection\",\n polarity: {\n best: [\n \"Use Polarity when you want to manipulate the enemy directly.\",\n \"It is usually stronger when your turn is about moving the target into a precise square, pulling or pushing them, or switching with them.\",\n \"It fits better in direct offensive turns where the target's final cell matters more than your own.\",\n ],\n examples: [\n \"Use Fire Polarity when you want to switch with an enemy and place them exactly where you need them.\",\n \"Use Water Polarity when you want to pull a target into your team, into your tackle zone, or into an AoE setup.\",\n \"Use Earth Polarity when you need to push an enemy away from you or away from an ally while still rotating the state.\",\n \"Use Air Polarity when you want your Huppermage to reposition symmetrically around the target while keeping the enemy in place.\",\n ],\n takeaway:\n \"Polarity is usually the more intuitive choice when the question is: how do I move the enemy?\",\n },\n convection: {\n best: [\n \"Use Convection when you want to manipulate the relationship between you and the target instead of directly pulling or pushing the target in the obvious way.\",\n \"It is often stronger in more technical turns where you want to fix your own angle, create a cleaner follow-up line, or reposition without spending extra movement.\",\n \"It fits better for advanced routing, tricky maps, and turns where your spacing, angle, and overall board setup matter more than raw directness.\",\n ],\n examples: [\n \"Use Water Convection when you want to bring yourself closer to the target instead of pulling them to you.\",\n \"Use Earth Convection when you want to create distance from the target and keep a safer board state.\",\n \"Use Air Convection when you want to teleport the target symmetrically relative to your own position.\",\n \"Use Fire Convection when you want the mirrored Fire repositioning effect rather than the clean direct switch from Polarity.\",\n ],\n takeaway:\n \"Convection is usually the better choice when the question is: how do I fix my positioning and setup for the rest of the turn?\",\n },\n};\n\nconst variantGuides = [\n {\n title: \"Runic Overcharge vs Sublimation\",\n left: {\n name: \"Runic Overcharge\",\n best: [\n \"Use Runic Overcharge when there are many enemies or many entities involved and you expect to trigger a lot of runes.\",\n \"It is especially strong in bigger fights where broad rune generation is realistic.\",\n \"It fits Water and Air builds especially well because those builds often create many runes through their bigger AoEs.\",\n ],\n examples: [\n \"Pick it when the fight has many mobs and your turn can be built around generating several runes before cashing them out.\",\n \"Pick it in Water or Air styles where your AoEs make rune generation much easier and more consistent.\",\n ],\n takeaway: \"Choose Runic Overcharge when the fight is bigger, rune count is high, and you want broad multi-rune value.\",\n },\n right: {\n name: \"Sublimation\",\n best: [\n \"Use Sublimation when the fight is more focused on one important target.\",\n \"It is better for single-target pressure and bigger enemies where many attacks will go into the same target.\",\n \"It fits more focused damage plans rather than broad mob-clearing turns.\",\n ],\n examples: [\n \"Pick it when one bigger mob or one priority target is going to receive repeated attacks after the spell is applied.\",\n \"Pick it when your team or your turn will focus one enemy rather than spread damage widely.\",\n ],\n takeaway: \"Choose Sublimation when the fight is more single-target and you want value from repeated hits on one target.\",\n },\n accentLeft: \"from-purple-500 to-fuchsia-500\",\n accentRight: \"from-fuchsia-500 to-rose-500\",\n panelBg: \"from-purple-50 via-fuchsia-50 to-rose-50\",\n border: \"border-fuchsia-200\",\n },\n {\n title: \"Elemental Cycle vs Tribute\",\n left: {\n name: \"Elemental Cycle\",\n best: [\n \"Use Elemental Cycle when your first priority is to get the exact elemental state you want with minimal AP loss.\",\n \"It is better in cleaner setup turns, technical routing, and fights where state quality matters more than immediate reward.\",\n \"It is usually the safer pick when you want consistency and fewer awkward turns.\",\n ],\n examples: [\n \"Pick it when you often need to correct states before using a combination or payoff spell.\",\n \"Pick it when your build depends on getting the exact state quickly and reliably.\",\n ],\n takeaway: \"Choose Elemental Cycle when state control comes first and the buff is secondary.\",\n },\n right: {\n name: \"Tribute\",\n best: [\n \"Use Tribute when you want the state change to also give you immediate value.\",\n \"It is better in bruiser turns, tempo turns, and builds that want AP, Power, MP, or shields as part of the combo itself.\",\n \"It is usually the stronger pick when the fight rewards immediate self-buffing rather than pure setup efficiency.\",\n ],\n examples: [\n \"Pick it in Fire/Water or other bruiser styles where shield, AP, or Power directly fuel the turn.\",\n \"Pick it when you expect the fight to be scrappier and you want your setup tool to also keep you alive or speed up your turn.\",\n ],\n takeaway: \"Choose Tribute when you want your state tool to also be a payoff tool.\",\n },\n accentLeft: \"from-yellow-500 to-amber-700\",\n accentRight: \"from-orange-500 to-yellow-500\",\n panelBg: \"from-yellow-50 via-amber-50 to-orange-50\",\n border: \"border-yellow-200\",\n },\n {\n title: \"Imprint vs Contribution\",\n left: {\n name: \"Imprint\",\n best: [\n \"Use Imprint when you want more precise rune placement and tighter control over which rune gets created.\",\n \"It is better in setup-heavy turns where one target's state needs to become one specific rune.\",\n \"It fits cleaner, more controlled gameplay.\",\n ],\n examples: [\n \"Pick it when your next turn depends on one specific rune being in play.\",\n \"Pick it when you want to convert one enemy state into a rune without cashing in all states at once.\",\n ],\n takeaway: \"Choose Imprint when you want precision and control over rune creation.\",\n },\n right: {\n name: \"Contribution\",\n best: [\n \"Use Contribution when you want to convert many enemy states into immediate value at once.\",\n \"It is better in bigger fights, bruiser loops, and turns where AP, Power, shields, or MP from multiple states matter more than precision.\",\n \"It fits broader teamfight turns and explosive tempo turns.\",\n ],\n examples: [\n \"Pick it when several enemies are already carrying useful states and you want to cash them all in.\",\n \"Pick it in builds like Water/Air or Fire/Water where those buffs directly extend your turn or survivability.\",\n ],\n takeaway: \"Choose Contribution when you want broad state conversion and immediate payoff.\",\n },\n accentLeft: \"from-rose-500 to-orange-500\",\n accentRight: \"from-orange-500 to-yellow-500\",\n panelBg: \"from-rose-50 via-orange-50 to-yellow-50\",\n border: \"border-rose-200\",\n },\n {\n title: \"Runification vs Manifestation\",\n left: {\n name: \"Runification\",\n best: [\n \"Use Runification when you expect crowded fights, many targets, or repeated AoE value from runes.\",\n \"It is better when the fight rewards broad sustain and easier value generation.\",\n \"It fits PvM mob fights especially well.\",\n ],\n examples: [\n \"Pick it when several enemies can be affected and you want a more forgiving rune trigger tool.\",\n \"Pick it when you are fighting many mobs and want your rune spell to generate value without perfect precision.\",\n ],\n takeaway: \"Choose Runification when you want broader AoE value and easier sustain.\",\n },\n right: {\n name: \"Manifestation\",\n best: [\n \"Use Manifestation when exact placement matters more than raw area value.\",\n \"It is better in precise positional play, cleaner setups, and turns where the free-cell condition can be exploited well.\",\n \"It fits more surgical gameplay and stronger map reading.\",\n ],\n examples: [\n \"Pick it when one exact teleport or positional effect on a rune matters more than general value.\",\n \"Pick it in technical fights where you can plan around rune cells very deliberately.\",\n ],\n takeaway: \"Choose Manifestation when you want tighter, more surgical rune control.\",\n },\n accentLeft: \"from-fuchsia-500 to-rose-600\",\n accentRight: \"from-pink-500 to-fuchsia-600\",\n panelBg: \"from-fuchsia-50 via-pink-50 to-rose-50\",\n border: \"border-fuchsia-200\",\n },\n {\n title: \"Propagation vs Runic Prism\",\n left: {\n name: \"Propagation\",\n best: [\n \"Use Propagation when your main goal is to spread elemental states in an area and prepare follow-up combos.\",\n \"It is better when state distribution is the real bottleneck of your turn.\",\n \"It fits combo setup and AoE conversion better than pure utility turns.\",\n ],\n examples: [\n \"Pick it when one enemy already has the right state and you want nearby enemies to get it too.\",\n \"Pick it when your next actions depend on several enemies sharing the same state.\",\n ],\n takeaway: \"Choose Propagation when you need wider state spread for combo turns.\",\n },\n right: {\n name: \"Runic Prism\",\n best: [\n \"Use Runic Prism when your rune utility matters more than raw state spread.\",\n \"It is better in team-support turns, control turns, and fights where Gravity, heal control, or lock-related effects matter a lot.\",\n \"It fits utility-heavy gameplay better than direct combo setup.\",\n ],\n examples: [\n \"Pick it when the rune's area effect itself can decide the turn or help your team more than spreading one state would.\",\n \"Pick it when map control or special utility is more valuable than pure offensive preparation.\",\n ],\n takeaway: \"Choose Runic Prism when you want broader rune-based utility instead of broader state spread.\",\n },\n accentLeft: \"from-violet-500 to-purple-600\",\n accentRight: \"from-purple-500 to-amber-500\",\n panelBg: \"from-violet-50 via-purple-50 to-amber-50\",\n border: \"border-purple-200\",\n },\n];\n\nconst spellCards = [\n {\n name: \"Polarity\",\n family: \"Positioning spell\",\n accent: \"from-amber-500 via-yellow-500 to-amber-700\",\n border: \"border-amber-200\",\n panelBg: \"from-amber-50 via-yellow-50 to-orange-50\",\n tags: [\"Positioning\", \"Variant\", \"No line of sight\"],\n summary:\n \"A direct positioning spell that changes the target's state and moves the enemy or the Huppermage depending on the current element.\",\n whyItMatters:\n \"It is one of the cleanest and most intuitive positioning tools in the class, especially when the enemy's final cell matters a lot.\",\n details: [\n \"Water: pulls the target.\",\n \"Earth: pushes the target.\",\n \"Air: teleports the Huppermage symmetrically relative to the target.\",\n \"Fire: switches places with the target.\",\n ],\n extra: \"A core spell for direct target manipulation and offensive positioning.\",\n },\n {\n name: \"Convection\",\n family: \"Positioning spell\",\n accent: \"from-amber-700 via-orange-500 to-yellow-500\",\n border: \"border-orange-200\",\n panelBg: \"from-orange-50 via-amber-50 to-yellow-50\",\n tags: [\"Positioning\", \"Variant\", \"No line of sight\"],\n summary:\n \"A more technical positioning spell that changes the target's state and adjusts spacing or mirrored placement in a less direct way than Polarity.\",\n whyItMatters:\n \"It is stronger when your own angle, spacing, or setup for the rest of the turn matters more than simply moving the enemy in the clearest possible way.\",\n details: [\n \"Water: moves the caster closer to the target.\",\n \"Earth: moves the caster away from the target.\",\n \"Air: teleports the target symmetrically relative to the caster.\",\n \"Fire: teleports both target and caster to their previous positions.\",\n ],\n extra: \"A technical positioning spell for fixing your own setup and routing.\",\n },\n {\n name: \"Elemental Cycle\",\n family: \"State control spell\",\n accent: \"from-yellow-500 via-orange-400 to-amber-700\",\n border: \"border-yellow-200\",\n panelBg: \"from-yellow-50 via-amber-50 to-orange-50\",\n tags: [\"State control\", \"Routing\", \"AP refund\"],\n summary:\n \"Changes the targeted enemy's elemental state and reimburses its AP cost on the first cast on a target.\",\n whyItMatters:\n \"It is one of the cleanest tools for routing into the exact state you want without losing tempo.\",\n details: [\n \"Cycle shown in game: Water → Fire → Air → Earth → Water.\",\n \"Very strong for fixing awkward turns.\",\n \"Often the safest choice when precise state setup matters most.\",\n ],\n extra: \"A pure setup spell focused on consistency and clean state control.\",\n },\n {\n name: \"Tribute\",\n family: \"State payoff spell\",\n accent: \"from-orange-500 via-amber-500 to-yellow-500\",\n border: \"border-orange-200\",\n panelBg: \"from-orange-50 via-amber-50 to-yellow-50\",\n tags: [\"Buffs\", \"State control\", \"Tempo\"],\n summary:\n \"Changes the target's elemental state and gives the Huppermage a buff based on the current state on the enemy.\",\n whyItMatters:\n \"It turns a state-control action into immediate tempo, sustain, or damage value.\",\n details: [\n \"State rotation follows the same path as Elemental Cycle: Water → Fire → Air → Earth → Water.\",\n \"Earth: gives MP.\",\n \"Fire: gives a shield.\",\n \"Water: gives Power.\",\n \"Air: gives AP.\",\n ],\n extra: \"A hybrid setup-and-payoff spell that makes turns stronger immediately.\",\n },\n {\n name: \"Imprint\",\n family: \"Rune setup spell\",\n accent: \"from-rose-500 via-pink-500 to-orange-500\",\n border: \"border-rose-200\",\n panelBg: \"from-rose-50 via-pink-50 to-orange-50\",\n tags: [\"Runes\", \"Precision\", \"Setup\"],\n summary:\n \"Consumes an elemental state to place a rune in that element, giving you tighter control over rune creation.\",\n whyItMatters:\n \"It is one of the best precision tools in the rune engine.\",\n details: [\n \"Consumes the state on the targeted enemy to place the matching rune.\",\n \"Can affect all enemies when cast on the caster.\",\n \"Can also use the last rune placed by the caster in some cases.\",\n ],\n extra: \"A precise rune-placement spell for controlled setup.\",\n },\n {\n name: \"Contribution\",\n family: \"State conversion spell\",\n accent: \"from-orange-500 via-yellow-500 to-amber-600\",\n border: \"border-yellow-200\",\n panelBg: \"from-orange-50 via-yellow-50 to-amber-50\",\n tags: [\"Buffs\", \"Rune placement\", \"Teamfight\"],\n summary:\n \"Places a rune and applies effects based on the elemental states of all enemies, then consumes those states.\",\n whyItMatters:\n \"It is a broad conversion tool that turns many enemy states into immediate value.\",\n details: [\n \"Earth: gives MP.\",\n \"Fire: gives a shield.\",\n \"Water: gives Power.\",\n \"Air: gives AP.\",\n \"Consumes all elemental states.\",\n ],\n extra: \"A broad state-cashout spell that turns setup into immediate tempo.\",\n },\n {\n name: \"Runification\",\n family: \"Rune trigger spell\",\n accent: \"from-fuchsia-500 via-pink-500 to-rose-600\",\n border: \"border-fuchsia-200\",\n panelBg: \"from-fuchsia-50 via-pink-50 to-rose-50\",\n tags: [\"Runes\", \"AoE value\", \"Sustain\"],\n summary:\n \"Triggers one of the caster's runes to steal life or heal allies on it and apply rune-based bonuses.\",\n whyItMatters:\n \"It is the more forgiving rune trigger and is especially strong when many targets or repeated area value are involved.\",\n details: [\n \"Very strong when fighting many mobs.\",\n \"A major sustain tool in crowded fights.\",\n \"Can generate elemental combinations.\",\n ],\n extra: \"A broad-value rune trigger that excels in AoE situations.\",\n },\n {\n name: \"Manifestation\",\n family: \"Rune trigger spell\",\n accent: \"from-pink-500 via-fuchsia-500 to-purple-600\",\n border: \"border-pink-200\",\n panelBg: \"from-pink-50 via-fuchsia-50 to-purple-50\",\n tags: [\"Runes\", \"Precision\", \"Positioning\"],\n summary:\n \"Triggers one of the caster's runes like Runification, but adds more positional precision when the rune cell is free.\",\n whyItMatters:\n \"It is the more surgical rune trigger and is better when exact placement matters more than general value.\",\n details: [\n \"Earth rune: pushes in area.\",\n \"Fire rune: teleports the caster to the rune.\",\n \"Water rune: attracts in area.\",\n \"Air rune: teleports entities symmetrically relative to the rune.\",\n ],\n extra: \"A precise rune trigger for technical positioning turns.\",\n },\n {\n name: \"Propagation\",\n family: \"Area setup spell\",\n accent: \"from-violet-500 via-purple-500 to-indigo-500\",\n border: \"border-purple-200\",\n panelBg: \"from-violet-50 via-purple-50 to-indigo-50\",\n tags: [\"AoE setup\", \"State spread\", \"Combos\"],\n summary: \"Spreads an elemental state in an area around the target.\",\n whyItMatters:\n \"It is one of the best ways to turn one prepared state into a much bigger combo turn.\",\n details: [\n \"Spreads the targeted enemy's state in an area.\",\n \"Can use the last rune placed if the enemy has no state.\",\n \"Very useful for AoE combination turns.\",\n ],\n extra: \"A setup spell for widening state coverage before a payoff turn.\",\n },\n {\n name: \"Runic Prism\",\n family: \"Area utility spell\",\n accent: \"from-purple-500 via-amber-500 to-yellow-500\",\n border: \"border-amber-200\",\n panelBg: \"from-purple-50 via-amber-50 to-yellow-50\",\n tags: [\"Rune utility\", \"Area effects\", \"Support\"],\n summary:\n \"Triggers one of the caster's runes to apply area utility and an elemental state based on the rune element.\",\n whyItMatters: \"It gives Huppermage broader team utility and control, not just combo setup.\",\n details: [\n \"Earth rune: reduces effect duration on targets.\",\n \"Fire rune: increases heals received by allies and reduces heals received by enemies.\",\n \"Water rune: applies Gravity state.\",\n \"Air rune: makes allies Unlockable and enemies Unable to Lock.\",\n ],\n extra: \"A utility-focused rune spell for support and control turns.\",\n },\n {\n name: \"Supernova\",\n family: \"Payoff spell\",\n accent: \"from-indigo-500 via-fuchsia-500 to-pink-500\",\n border: \"border-indigo-200\",\n panelBg: \"from-indigo-50 via-fuchsia-50 to-pink-50\",\n tags: [\"Payoff\", \"Advanced\", \"Burst logic\"],\n summary:\n \"A 3 AP payoff spell that uses your own best and worst elemental characteristics to create a specific elemental combination on the target.\",\n whyItMatters:\n \"Supernova is especially strong in mono and bi-element builds because you can deliberately shape your stat distribution so the spell always creates the combination you want.\",\n details: [\n \"Works from your best and worst elemental stats.\",\n \"Very strong in mono builds and also in bi-element builds with controlled stat distribution.\",\n \"You can deliberately gear around it so the same combination is created consistently.\",\n \"Example: in a Fire / Air build, you can make Fire your best element and Earth your worst element so Supernova always creates the Fire / Earth combination.\",\n \"That lets you apply the Fire / Earth vulnerability effect for only 3 AP.\",\n ],\n extra:\n \"This is what makes Supernova so dangerous: when your stats are built intentionally, it becomes a cheap and reliable way to force the exact combination you want.\",\n },\n {\n name: \"Runic Overcharge\",\n family: \"Payoff spell\",\n accent: \"from-purple-500 via-fuchsia-500 to-pink-500\",\n border: \"border-purple-200\",\n panelBg: \"from-purple-50 via-fuchsia-50 to-pink-50\",\n tags: [\"Payoff\", \"Runes\", \"AoE value\"],\n summary:\n \"Triggers all of the caster's runes to inflict damage on an enemy or heal the targeted ally in each rune's element for every rune triggered.\",\n whyItMatters:\n \"Runic Overcharge is especially strong when many runes can be generated, so it performs better in larger fights and often fits Water and Air builds very well.\",\n details: [\n \"Triggers all of the caster's runes.\",\n \"Deals damage on an enemy or heals the targeted ally for each rune triggered.\",\n \"Especially strong when there are more mobs and you can build many runes first.\",\n \"Very good for Water and Air builds because those builds often generate many runes through larger AoEs.\",\n \"Generally stronger in broad fights than in pure single-target situations.\",\n ],\n extra:\n \"A rune-cashout payoff spell that becomes much stronger when the fight lets you stack many runes before using it.\",\n },\n {\n name: \"Sublimation\",\n family: \"Payoff spell\",\n accent: \"from-fuchsia-500 via-pink-500 to-rose-500\",\n border: \"border-fuchsia-200\",\n panelBg: \"from-fuchsia-50 via-pink-50 to-rose-50\",\n tags: [\"Payoff\", \"Reactive\", \"State generation\"],\n summary:\n \"Applies the Sublimation state on a target and heals the attackers of that target while also applying a state to the attacker in the element of the damage suffered by the target.\",\n whyItMatters:\n \"It is a reactive payoff spell that can turn focused attacks on one target into healing and fresh elemental states for the attackers.\",\n details: [\n \"Heals the attackers of the targeted enemy.\",\n \"Applies the Sublimation state on the target.\",\n \"Applies a state on the attacker in the element of the attack suffered by the target.\",\n \"Can generate Elemental Combinations.\",\n \"Very useful when several attacks will go into the same target after Sublimation is applied.\",\n ],\n extra:\n \"A reactive payoff spell that rewards focused damage on one target by turning those attacks into healing and new elemental-state generation.\",\n },\n];\n\nconst progressionAdvice = {\n title: \"Recommended progression from 1 to 200\",\n summary:\n \"I recommend playing mono element from level 1 to 200, bi-element from around 100 to 200, and multi-element from around 150 to 200. The goal is not only to be strong at each stage, but also to build your understanding of every element before level 200.\",\n points: [\n \"Mono element: best from 1 to 200.\",\n \"Bi-element: best introduced from around 100 to 200.\",\n \"Multi-element: best introduced from around 150 to 200.\",\n \"Each time you buy a new set, try a new element or elemental combination.\",\n \"That way, by the time you reach level 200, you can play all elements much more naturally in an omni or multi-element build.\",\n ],\n gearSteps: [\"15\", \"30 / 40\", \"60\", \"80\", \"100\", \"120 / 130\", \"150 / 160\", \"180 / 190\", \"200\"],\n};\n\nconst builds = [\n {\n title: \"Best all-round entry build\",\n build: \"Earth\",\n elements: [\"Earth\"],\n mode: \"PvM / PvP\",\n difficulty: \"Low\",\n rank: \"Starter\",\n gradient: \"from-stone-500 via-amber-700 to-yellow-900\",\n panelBg: \"from-stone-50 via-amber-50 to-yellow-50\",\n border: \"border-amber-300\",\n summary:\n \"Earth is the easiest way to get immediate value from Huppermage because it offers stable control, long range, pushback utility, and simpler turn structure while you learn how the class routes states and payoff. It is also very strong in PvP because range, control, and safer turn structure matter a lot there too.\",\n when: [\"Solo questing\", \"General dungeon progression\", \"Learning modern state routing\", \"Stable PvP\"],\n priorities: [\"Range\", \"AP comfort\", \"Control\", \"Pushback utility\"],\n strengths: [\"Longest range\", \"Simple value turns\", \"Safe learning curve\", \"Very solid in PvP\"],\n avoid:\n \"Do not assume simple means weak. The goal is to learn clean value turns before adding greedier routing.\",\n },\n {\n title: \"Best mobility build\",\n build: \"Fire / Air\",\n elements: [\"Fire\", \"Air\"],\n mode: \"PvM / PvP\",\n difficulty: \"Medium\",\n rank: \"Tempo\",\n gradient: \"from-red-600 via-orange-500 via-lime-400 to-green-400\",\n panelBg: \"from-red-50 via-orange-50 to-green-50\",\n border: \"border-lime-200\",\n summary:\n \"The most mobile Huppermage build. It goes into the middle, creates pressure, and gets out again before the turn ends, with strong tempo and chase patterns.\",\n when: [\"Hit-and-run turns\", \"Fast maps\", \"Players who love movement\"],\n priorities: [\"AP\", \"MP\", \"Positioning\", \"Tempo damage\"],\n strengths: [\"Highest mobility\", \"Hard to pin down\", \"Strong engage-disengage\"],\n avoid:\n \"Do not waste the mobility on empty movement. Every reposition should create pressure, setup, or safety.\",\n },\n {\n title: \"Best range build\",\n build: \"Earth / Fire\",\n elements: [\"Earth\", \"Fire\"],\n mode: \"PvM / PvP\",\n difficulty: \"Medium\",\n rank: \"Range\",\n gradient: \"from-stone-600 via-amber-700 to-red-500\",\n panelBg: \"from-stone-50 via-amber-50 to-red-50\",\n border: \"border-orange-200\",\n summary:\n \"The best range-focused build in this gallery. It keeps strong distance play, good offensive pressure, and the Fire / Earth vulnerability effect, which makes it safer than a full commit build while still threatening real damage.\",\n when: [\"Open maps\", \"Safe ranged pressure\", \"Players who want structure plus damage\"],\n priorities: [\"Range\", \"Damage\", \"AP\", \"Positioning\"],\n strengths: [\"Very strong range\", \"Good pressure\", \"Vulnerability setup\"],\n avoid:\n \"Do not stay far away just for the sake of it. This build is strongest when the range advantage is converted into clean vulnerability windows and controlled damage.\",\n },\n {\n title: \"Best tank build\",\n build: \"Air / Water\",\n elements: [\"Air\", \"Water\"],\n mode: \"PvM / PvP\",\n difficulty: \"Medium–High\",\n rank: \"Bruiser\",\n gradient: \"from-blue-600 via-cyan-400 to-emerald-400\",\n panelBg: \"from-blue-50 via-cyan-50 to-emerald-50\",\n border: \"border-cyan-200\",\n summary:\n \"One of the tankiest Huppermage builds. It wants enemies around you, disrupts their damage, heals through rune loops, and thrives in chaotic clustered fights.\",\n when: [\"Messy fights\", \"Clustered enemies\", \"Bruiser playstyle\"],\n priorities: [\"Resists\", \"HP\", \"AP\", \"AoE access\"],\n strengths: [\"Very tanky\", \"Strong anti-damage\", \"Excellent in packs\"],\n avoid:\n \"Do not play it like a passive ranged build. This path gets value by entering the fight and surviving inside it.\",\n },\n {\n title: \"Best PvP build\",\n build: \"Mono Water\",\n elements: [\"Water\"],\n mode: \"PvP\",\n difficulty: \"Medium\",\n rank: \"Arena\",\n gradient: \"from-blue-500 via-sky-500 to-blue-700\",\n panelBg: \"from-blue-50 via-sky-50 to-indigo-50\",\n border: \"border-blue-200\",\n summary:\n \"Mono Water is one of the strongest PvP choices because of its raw damage, pressure windows, and how many Water spells function without line of sight.\",\n when: [\"1v1\", \"3v3 focus turns\", \"Aggressive PvP players\"],\n priorities: [\"Damage\", \"Range\", \"Target access\", \"Burst setup\"],\n strengths: [\"Highest damage pressure\", \"No-line-of-sight value\", \"Strong focus turns\"],\n avoid:\n \"Do not force it on turns where you cannot actually touch the target or convert the damage into a meaningful swing.\",\n },\n {\n title: \"Best PvM build\",\n build: \"Omni Crit\",\n elements: [\"Fire\", \"Water\", \"Earth\", \"Air\"],\n mode: \"PvM\",\n difficulty: \"Very High\",\n rank: \"Endgame\",\n gradient: \"from-indigo-500 via-fuchsia-500 via-pink-500 to-blue-500\",\n panelBg: \"from-indigo-50 via-fuchsia-50 to-blue-50\",\n border: \"border-indigo-200\",\n summary:\n \"The strongest all-around PvM ceiling build. Omni crit gives access to the full class engine, flexible routing, and massive adaptation, but it is also one of the hardest ways to play Huppermage well.\",\n when: [\"Endgame PvM\", \"Experienced players\", \"Flexible team play\"],\n priorities: [\"AP\", \"Crit\", \"Range\", \"Decision quality\"],\n strengths: [\"Highest flexibility\", \"Huge ceiling\", \"Full class access\"],\n avoid:\n \"Do not pick omni crit just because it looks optimal on paper. Bad omni is much worse than disciplined hybrid play.\",\n },\n {\n title: \"Best crowd control build\",\n build: \"Earth / Water\",\n elements: [\"Earth\", \"Water\"],\n mode: \"PvM / PvP\",\n difficulty: \"High\",\n rank: \"Control\",\n gradient: \"from-blue-600 via-teal-500 to-amber-700\",\n panelBg: \"from-blue-50 via-teal-50 to-amber-50\",\n border: \"border-teal-200\",\n summary:\n \"The strongest crowd-control build. It removes MP, slows the fight down, and works especially well when built intentionally around control rather than generic damage.\",\n when: [\"Control comps\", \"Lockdown turns\", \"Specific MP removal sets\"],\n priorities: [\"MP reduction\", \"Range\", \"Control\", \"Survivability\"],\n strengths: [\"Best CC path\", \"MP removal\", \"Strong lockdown\"],\n avoid:\n \"Do not treat it like a generic bruiser build. It shines when the whole setup is built around controlling enemy movement.\",\n },\n {\n title: \"Best pushback build\",\n build: \"Earth pushback damage\",\n elements: [\"Earth\"],\n mode: \"PvP / niche PvM\",\n difficulty: \"High\",\n rank: \"Pushback\",\n gradient: \"from-stone-600 via-amber-700 to-orange-500\",\n panelBg: \"from-stone-50 via-amber-50 to-orange-50\",\n border: \"border-amber-300\",\n summary:\n \"A specialized Earth build focused on pushback damage. It is much more niche than the standard Earth build, but it can be very oppressive when maps, matchups, and gear all support that plan.\",\n when: [\"Pushback maps\", \"Specialized PvP\", \"Matchups vulnerable to map control\"],\n priorities: [\"Pushback damage\", \"Range\", \"Control\", \"Positioning\"],\n strengths: [\"Strong map punishment\", \"Unexpected kill pressure\", \"Earth control synergy\"],\n avoid:\n \"Do not treat it like a default Earth build. It only shines when the fight really rewards pushback setups and map manipulation.\",\n },\n];\n\nconst comboSections = [\n {\n ap: \"6 AP\",\n intro:\n \"In the first levels you normally only have 6 AP, so the goal is to generate one clean combination with as little waste as possible.\",\n combos: [\n {\n title: \"Basic elemental combination\",\n sequence: \"3 AP elemental spell → Elemental Cycle → 3 AP elemental spell\",\n why:\n \"Elemental Cycle rotates the elemental state for free, so this lets you generate an elemental combination very early and gain 50 Power for 3 turns.\",\n result: \"Stats gained: 50 Power for 3 turns.\",\n },\n ],\n },\n {\n ap: \"7 AP\",\n intro:\n \"With 7 AP, you can already start stacking more than one source of stats in the same turn.\",\n combos: [\n {\n title: \"Drain + combination + rune value\",\n sequence: \"3 AP elemental spell → Elemental Drain → Elemental Cycle → Runification\",\n why:\n \"This combo gives stats from several sources at once: Elemental Drain, the elemental combination, and Runification.\",\n result: \"Stats gained: 60 elemental stats from Drain + 50 Power from the combination + 30 elemental stats from Runification = 140 total stats.\",\n },\n ],\n },\n {\n ap: \"8 AP\",\n intro:\n \"At 8 AP, you can choose between a more direct damage/setup line and a longer-range line if the target is further away.\",\n combos: [\n {\n title: \"Standard 8 AP combo\",\n sequence: \"3 AP elemental spell → Elemental Drain → Elemental Cycle → 3 AP elemental spell\",\n why:\n \"This is the clean standard line when you can stay in range and want both stat gain and a fresh elemental combination.\",\n result: \"Stats gained: 60 elemental stats from Drain + 50 Power from the combination = 110 total stats.\",\n },\n {\n title: \"If the enemy is further away\",\n sequence: \"3 AP elemental spell → Elemental Cycle → Runification → 3 AP elemental spell\",\n why:\n \"This line is more useful when distance makes the standard route less practical and you still want to keep tempo through Runification.\",\n result: \"Stats gained: 50 Power from the combination + 30 elemental stats from Runification = 80 total stats.\",\n },\n ],\n },\n {\n ap: \"9 AP\",\n intro:\n \"At 9 AP, you start getting enough space for longer setup lines, repeated elemental application, and more deliberate preparation for the next turn.\",\n combos: [\n {\n title: \"Simple triple-element turn\",\n sequence: \"3 AP elemental spell → Elemental Cycle → 3 AP elemental spell → 3 AP elemental spell or Journey\",\n why:\n \"A clean tempo line when you want to keep pressure high and still fit a third action into the turn.\",\n result: \"Stats gained: 50 Power from the first elemental combination. Any additional stat gain depends on the third spell used.\",\n },\n {\n title: \"Prepare an unusual combination for next turn\",\n sequence: \"3 AP elemental spell → Elemental Drain → 3 AP elemental spell → 2× Elemental Cycle\",\n why:\n \"This prepares an unusual elemental combination that you do not normally use in your kit, so that your next turn can immediately start by gaining the 50 Power from that prepared combination.\",\n result: \"Stats gained: 60 elemental stats from Drain this turn, then 50 Power at the start of the next turn from the prepared unusual combination.\",\n },\n {\n title: \"If the target already has a state\",\n sequence: \"Contribution → 3 AP elemental spell → Elemental Drain → Elemental Cycle → Runification\",\n why:\n \"If the target or targets already have a state, you can begin by cashing in that existing setup with Contribution before continuing the turn.\",\n result: \"Stats gained: depends on the states already present when you cast Contribution, plus 60 elemental stats from Drain and 30 elemental stats from Runification.\",\n },\n ],\n },\n {\n ap: \"10 AP\",\n intro:\n \"At 10 AP you should already have Runification level 2, access to Elemental Shield, and access to the 4 AP elemental spells. This is where your turns start becoming much more specialized by element and build.\",\n combos: [\n {\n title: \"Most efficient single-target combo\",\n sequence: \"3 AP elemental spell → Elemental Drain → Elemental Cycle → 3 AP elemental spell → Runification\",\n why:\n \"This is the cleanest efficient single-target route at 10 AP because it combines Drain stats, a fresh elemental combination, and Runification value in one turn.\",\n result: \"Stats gained: 60 elemental stats from Drain + 50 Power from the elemental combination + 40 elemental stats from Runification = 150 total stats.\",\n },\n {\n title: \"If you are playing Earth or Fire\",\n sequence: \"3 AP elemental spell → Elemental Cycle → 3 AP elemental spell → 4 AP elemental spell\",\n why:\n \"This is a clean 10 AP line for Earth or Fire paths because it lets you keep a combination-oriented turn while fitting one of the stronger 4 AP elemental spells.\",\n result: \"Stats gained: 50 Power from the elemental combination.\",\n },\n {\n title: \"Water offensive line\",\n sequence: \"4 AP elemental spell → Runification → Contribution → Runification\",\n why:\n \"This is a strong Water route when you want to get repeated rune value and cash in existing states through Contribution.\",\n result: \"Stats gained: depends on the states already present for Contribution, plus the stats gained from each Runification trigger.\",\n },\n {\n title: \"Water defensive line\",\n sequence: \"4 AP elemental spell → 2× Elemental Cycle on different enemies → Contribution → Runification → Elemental Shield\",\n why:\n \"This is the more defensive Water route. By placing two Fire states on different enemies before Contribution, you can cash them in for double shielding and then reinforce the turn with Runification and Elemental Shield.\",\n result: \"Stats gained: 2× shield from Contribution because two enemies carry Fire states, plus the stats gained from Runification.\",\n },\n {\n title: \"Water double-combination setup\",\n sequence: \"4 AP elemental spell → 2× Elemental Cycle on one enemy + 1× Elemental Cycle on another enemy → Runification → 3 AP elemental spell\",\n why:\n \"This route is useful when you want to create two different elemental combinations in the same turn while still getting rune value through Runification.\",\n result: \"Stats gained: 100 Power from 2 different elemental combinations + 40 elemental stats per enemy hit with Runification.\",\n },\n {\n title: \"Air tempo line\",\n sequence: \"4 AP elemental spell → Runification → Contribution → Runification → Elemental Cycle → Elemental Drain\",\n why:\n \"This is a strong Air route because Contribution can give 2 AP back, which lets you extend the turn further and stack more stat gain before ending.\",\n result: \"Stats gained: 2 AP back from Contribution if the right states are present, plus 60 elemental stats from Elemental Drain and the stats gained from both Runification triggers.\",\n },\n {\n title: \"Air follow-up next turn (12 AP)\",\n sequence: \"4 AP elemental spell → Elemental Cycle → Runification → 3 AP elemental spell → 3 AP elemental spell\",\n why:\n \"After the previous Air line gives you access to a 12 AP turn, this becomes a very clean follow-up route for chaining pressure and setup.\",\n result: \"Stats gained: 50 Power from the elemental combination + the stats gained from Runification.\",\n },\n ],\n },\n];\n\nconst studySections = [\n {\n title: \"Core understanding\",\n items: [\n \"I know what each mono element is best at: Fire for switching and anti-heal, Earth for range and control, Water for damage and no-line-of-sight pressure, Air for hit-and-run tempo.\",\n \"I know that Earth is the easiest entry path into Huppermage.\",\n \"I understand that Water is the shortest-ranged but highest-damage element, while Earth is the longest-ranged but lowest-damage element.\",\n `I know the main identities of the hybrid combinations:\n• Fire / Water: removes 60 Dodge.\n• Earth / Air: steals 3 Range.\n• Fire / Earth: applies a 15% bonus damage taken effect.\n• Earth / Water: removes 3 MP.\n• Fire / Air: removes 2 AP.\n• Air / Water: applies a 15% damage penalty.`,\n ],\n },\n {\n title: \"States and combinations\",\n items: [\n \"I know how to generate an elemental combination consistently with Elemental Cycle and 3 AP elemental spells.\",\n \"I understand which combinations my build uses most often and which unusual combinations I can prepare for the next turn.\",\n \"I know that elemental combinations give 50 Power for 3 turns.\",\n \"I understand when it is worth preparing states on several enemies instead of cashing out immediately.\",\n \"I know the two main state-rotation paths: Elemental Cycle / Tribute goes Water → Fire → Air → Earth, while Polarity / Convection goes Earth → Air → Fire → Water.\",\n \"I understand that these two rotation routes mean I am usually only one spell away from creating most elemental combinations.\",\n ],\n },\n {\n title: \"Variant choices\",\n items: [\n \"I can explain when Polarity is better than Convection.\",\n \"I can explain when Elemental Cycle is better than Tribute.\",\n \"I can explain when Imprint is better than Contribution.\",\n \"I can explain when Runification is better than Manifestation.\",\n \"I can explain when Propagation is better than Runic Prism.\",\n \"I can explain when Runic Overcharge is better than Sublimation.\",\n ],\n },\n {\n title: \"Rune engine\",\n items: [\n \"I know how to turn enemy states into rune value through Imprint or Contribution.\",\n \"I understand that Runification is usually stronger in crowded fights, while Manifestation is better for precise positional play.\",\n \"I know how rune-based turns help me heal, gain stats, and keep damage flowing.\",\n \"I understand how to use Runic Overcharge when many runes can be generated first.\",\n ],\n },\n {\n title: \"Fight planning\",\n items: [\n \"Against many enemies, I know that my first turn or two should usually focus on putting states on as many enemies as possible.\",\n \"I know how to loop Contribution or Imprint with Runification in group fights to sustain and clear efficiently.\",\n \"I do not cast payoff spells like Supernova, Sublimation, or Runic Overcharge blindly without proper setup.\",\n \"I can tell whether my turn should focus on direct control, broad value, precise setup, or immediate payoff.\",\n ],\n },\n {\n title: \"Progression and builds\",\n items: [\n \"I understand the recommended progression: mono from 1–200, bi-element from around 100–200, and multi from around 150–200.\",\n \"I know that each new gear step is a good moment to try a different element or combination.\",\n \"I know which build fits my goal best: entry, mobility, range, tank, PvP, PvM, crowd control, or pushback.\",\n \"I understand that by level 200 the goal is to feel comfortable with every element, not just one build.\",\n ],\n },\n];\n\nfunction renderElementText(text: string) {\n const parts = text.split(/(Earth|Fire|Water|Air)/g);\n\n return parts.map((part, index) => {\n if (part === \"Fire\") {\n return (\n \n {part}\n \n );\n }\n if (part === \"Earth\") {\n return (\n \n {part}\n \n );\n }\n if (part === \"Water\") {\n return (\n \n {part}\n \n );\n }\n if (part === \"Air\") {\n return (\n \n {part}\n \n );\n }\n return {part};\n });\n}\n\nconst glossary = [\n [\"State\", \"An elemental mark applied to a target that enables Huppermage combinations and altered spell value.\"],\n [\"Rune\", \"A battlefield resource generated by your elemental actions that later spells can exploit.\"],\n [\"Routing\", \"The order in which you sequence states, movement, and payoff inside one turn.\"],\n [\"Variant pair\", \"Two spells that share the same slot, so you choose one for the fight and cannot use both.\"],\n [\"Elemental combination\", \"The bonus effect created when two different elemental states interact on the same target.\"],\n [\"Unusual combination\", \"A combination your build does not naturally create often, but that you can prepare on purpose for a later turn.\"],\n [\"State rotation\", \"Changing a target from one elemental state to the next. Elemental Cycle / Tribute rotates Water → Fire → Air → Earth, while Polarity / Convection rotates Earth → Air → Fire → Water.\"],\n [\"Rune trigger\", \"A spell that activates existing runes for healing, damage, positioning, or utility.\"],\n [\"Cash out\", \"Turning prepared states or runes into immediate value, such as buffs, damage, healing, or utility.\"],\n [\"Best / Worst element\", \"A stat-dependent elemental logic used by spells such as Supernova.\"],\n [\"Front-to-back\", \"A playstyle where you pressure through the enemy line directly instead of diving into the middle of several enemies.\"],\n [\"Hit-and-run\", \"A style where you go in, create value, and leave before the enemy can punish your position.\"],\n [\"Tempo turn\", \"A turn focused on gaining immediate board advantage, AP efficiency, or pressure, even if it is not your highest raw damage turn.\"],\n [\"Focus target\", \"The enemy you plan to pressure repeatedly with several spells or attacks in the same turn or over multiple turns.\"],\n [\"Value turn\", \"A turn that improves board position, pressure, or setup even if it is not your highest raw damage turn.\"],\n];\n\nfunction FancyBullet({ className = \"\" }: { className?: string }) {\n return (\n \n \n \n );\n}\n\nfunction SectionTitle({ icon: Icon, title, subtitle }: { icon: React.ElementType; title: string; subtitle?: string }) {\n return (\n

\n \n

{title}

\n {subtitle ?

{subtitle}

: null}\n

\n );\n}\n\nexport default function DofusHuppermageGuide() {\n const [query, setQuery] = useState(\"\");\n const [modeFilter, setModeFilter] = useState(\"All\");\n const [selectedBuildElements, setSelectedBuildElements] = useState([]);\n const [checkedStudyItems, setCheckedStudyItems] = useState>({});\n\n const toggleStudyItem = (key: string) => {\n setCheckedStudyItems((prev) => ({\n ...prev,\n [key]: !prev[key],\n }));\n };\n\n const filteredBuilds = useMemo(() => {\n return builds.filter((b) => {\n const q = query.toLowerCase();\n const matchesQuery =\n !q ||\n [b.title, b.build, b.mode, b.summary, ...(b.when || []), ...(b.priorities || []), ...(b.elements || [])]\n .join(\" \")\n .toLowerCase()\n .includes(q);\n const matchesMode = modeFilter === \"All\" || b.mode.includes(modeFilter);\n const matchesElements =\n selectedBuildElements.length === 0 ||\n selectedBuildElements.some((element) => (b.elements || []).includes(element));\n return matchesQuery && matchesMode && matchesElements;\n });\n }, [query, modeFilter, selectedBuildElements]);\n\n return (\n

\n\n

\n \n

\n\n

\n \n

\n\n

\n by Zekalfra\n

\n DOFUS 3.5\n Huppermage\n Interactive Guide\n

\n Huppermage after the 3.5 update\n

\n A practical guide to relearn the class after the 2026 changes: builds, key spells, combo routes, and the logic behind modern Huppermage play.\n

\n\n \n \n \n \n Fast start\n \n \n \n

Play Huppermage well in one sentence

\n Choose the state that matters, position for the next action, then cash out without ruining your board.\n

Most common mistake after 3.5

\n Overusing the shiny new tools without asking whether they improved the target state, board, or kill chance.\n

If you are returning to the class

Relearn Polarity + Elemental Cycle first. That pair teaches you the easiest state manipulation patterns and makes the rest of the kit much easier to understand.

\n \n \n\n \n \n

\n\n

\n \n

\n\n

Arcane overview

\n State control, elemental routing, and payoff timing are what separate a clean Huppermage turn from a messy one.\n

\n \n \n \n\n \n \n \n Elements\n \n \n Key spells\n \n \n Builds\n \n \n Turn logic\n \n \n Study sheet\n \n \n\n \n \n \n \n \n \n {elements.map((el) => {\n const Icon = el.icon;\n return (\n

\n \n

{el.name}

\n \n Mono\n \n

{el.identity}

Strengths

\n {el.strengths.map((s) => (\n \n {s}\n \n ))}\n

Weaknesses

\n {el.weaknesses.map((s) => (\n \n {s}\n \n ))}\n

\n Best for: {el.bestFor}\n

\n );\n })}\n \n \n\n \n \n

\n \n

Elemental combinations

These are the real hybrid identities. Each pair changes how Huppermage wants to position, pressure, survive, and route turns.

\n \n \n

\n {combinations.map((combo) => (\n \n

{combo.pair}

{combo.short}

\n \n Hybrid\n \n

\n\n

Combination effect

{renderElementText(combo.combo)}

\n\n

{renderElementText(combo.style)}

\n\n

Strengths

\n \n {renderElementText(point)}\n

\n\n

\n Playstyle note: {combo.notes}\n

\n ))}\n

\n \n \n \n\n \n \n \n \n \n \n

How to read the spell page

You can only choose one spell from each left-right variant pair in the two main columns.
Example: you either take Polarity or Convection.
The same logic also applies to other key pairs like Elemental Cycle/Tribute, Imprint/Contribution, Runification/Manifestation, and Propagation/Runic Prism.
This is why two Huppermages can feel very different even before gear and elements are considered.

What usually decides the variant choice

Do you need direct control or broader value?
Is the fight about one priority target or many mobs?
Do you want precise setup or immediate payoff?
Does your build prefer cleaner routing, more utility, or stronger tempo?

\n\n

Practical guidance

{polarityVsConvectionGuide.title}

Polarity

Best when

\n \n {renderElementText(item)}\n

Examples

\n \n {renderElementText(item)}\n

\n Rule of thumb: {renderElementText(polarityVsConvectionGuide.polarity.takeaway)}\n

\n\n

Convection

Best when

\n \n {renderElementText(item)}\n

Examples

\n \n {renderElementText(item)}\n

\n Rule of thumb: {renderElementText(polarityVsConvectionGuide.convection.takeaway)}\n

\n\n {variantGuides.map((guide) => (\n \n

Variant practical guidance

{guide.title}

{guide.left.name}

Best when

\n \n {renderElementText(item)}\n

Examples

\n \n {renderElementText(item)}\n

\n Rule of thumb: {renderElementText(guide.left.takeaway)}\n

\n\n

{guide.right.name}

Best when

\n \n {renderElementText(item)}\n

Examples

\n \n {renderElementText(item)}\n

\n Rule of thumb: {renderElementText(guide.right.takeaway)}\n

\n ))}\n\n {spellCards.map((spell) => (\n \n

{spell.family}

{spell.name}

\n {spell.tags.map((tag) => (\n \n {tag}\n \n ))}\n

\n\n

{spell.summary}

\n\n

Why it matters

{spell.whyItMatters}

\n\n

Key effects

\n \n {renderElementText(detail)}\n

\n\n

\n Takeaway: {renderElementText(spell.extra)}\n

\n ))}\n

\n \n \n \n\n \n \n \n \n \n \n

{progressionAdvice.title}

{progressionAdvice.summary}

Main recommendation

\n \n {renderElementText(point)}\n

When to change gear

\n {progressionAdvice.gearSteps.map((step) => (\n \n {step}\n \n ))}\n

\n\n

How to use this tab

Pick a build identity first, then optimize gear around it.
These are playstyle archetypes, not exact item prescriptions.
Huppermage gets much stronger when your build, variants, and spell routing all point in the same direction.

Quick shortlist

\n {elements.map((element) => {\n const isActive = selectedBuildElements.includes(element.name);\n return (\n {\n setSelectedBuildElements((prev) =>\n prev.includes(element.name)\n ? prev.filter((item) => item !== element.name)\n : [...prev, element.name]\n );\n }}\n className={`rounded-full border px-3 py-1.5 text-sm transition-all duration-200 hover:-translate-y-0.5 ${isActive ? \"border-white/35 bg-white/20 text-white shadow-md\" : \"border-white/15 bg-white/10 text-white hover:bg-white/18 hover:border-white/30\"}`}\n >\n {element.name}\n \n );\n })}\n

\n\n

\n \n setQuery(e.target.value)}\n placeholder=\"Search by build, mode, identity, or priority\"\n className=\"pl-9 rounded-2xl bg-white/10 border-white/10 text-white placeholder:text-white/50\"\n />\n

\n {[\"All\", \"PvM\", \"PvP\"].map((m) => (\n setModeFilter(m)}\n >\n {m}\n \n ))}\n

\n\n

\n {filteredBuilds.map((build) => (\n

{build.rank}

{build.title}

{renderElementText(build.build)}

\n {build.mode}\n {build.difficulty}\n

\n\n

\n {renderElementText(build.summary)}\n

\n\n

Best when

\n {build.when.map((w) => (\n {w}\n ))}\n

Priorities

\n {build.priorities.map((p) => (\n {p}\n ))}\n

Strengths

\n \n {renderElementText(s)}\n

\n\n

\n Avoid: {renderElementText(build.avoid)}\n

\n ))}\n

\n \n \n \n\n \n \n \n \n \n \n

How to read this tab

These are starter combo patterns, not strict rules you must follow every turn.
The idea is to learn what your AP total realistically allows at each stage of leveling.
Once these patterns feel natural, you can adapt them depending on map, distance, enemy states, and rune setup.

\n\n

When fighting groups of enemies

\n In most multi-target fights, your first turn — and sometimes your second as well — should focus on applying elemental states to as many enemies as possible.\n

Once several enemies are marked, you can convert that setup with Contribution every two turns, or with Imprint every turn, depending on the variant you chose.
From there, Runification becomes the key follow-up: it helps you heal, boost your damage, and pressure multiple enemies at once.
This loop is one of the best ways to stay healthy in long fights while still keeping strong damage output.
In practice, it is one of the most reliable ways to clear large groups efficiently.

\n\n

\n {comboSections.map((section) => (\n

AP bracket

{section.ap}

{section.intro}

\n\n

\n {section.combos.map((combo) => (\n

{combo.title}

{renderElementText(combo.sequence)}

Why this works

{renderElementText(combo.why)}

Result

{renderElementText(combo.result)}

\n ))}\n

\n \n \n \n\n \n

\n \n \n \n \n \n

How to use this section

Do not treat this like an exam. It is a review sheet to see what still feels shaky.
If one section feels weak, go back to the matching tab and review only that part.
The goal is not to memorize everything at once, but to make sure your choices in fights are intentional.

\n\n

\n {studySections.map((section) => (\n

{section.title}

\n {section.items.map((item) => {\n const itemKey = `${section.title}-${item}`;\n const isChecked = !!checkedStudyItems[itemKey];\n return (\n toggleStudyItem(itemKey)}\n className={`w-full rounded-2xl border p-4 flex gap-3 items-start text-left transition-all ${\n isChecked ? \"bg-emerald-50 border-emerald-200\" : \"bg-slate-50 hover:bg-slate-100\"\n }`}\n >\n \n

\n {renderElementText(item)}\n

\n \n );\n })}\n

\n ))}\n

\n \n \n\n \n \n \n \n \n \n {glossary.map(([term, def]) => (\n \n {term}\n {def}\n \n ))}\n \n \n \n

\n \n \n\n

\n Guide by Zekalfra\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","16134920855564818714","traceTime",1778972009649]