/* ==========================================
   SORTS PAR ORDRE UNIQUE ET FIGURATIF
   ========================================== */


/* ==========================================================================
   ALIGNEMENT DES CLÉS POUR LES 20 SORTS DU GUERRIER
   ========================================================================== */

/* 1. Tranchant d'Air (vkey-steel-cleave) */
.vkey-steel-cleave {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 10px;
}

.vkey-steel-cleave .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 15%, 85% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 15% 75%, 15% 15%);
}

/* 2. Pression (vkey-hammer-blow) */
.vkey-hammer-blow {
  --border-color: #78909C;
  --neon-color: #90A4AE;
  --bg-soft: #1a2327;
  --wave-color: #37474F;
  --core-bright: #ECEFF1;
  --glow-radius: 8px;
}

.vkey-hammer-blow .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 3. Rage de Combat (vkey-rage-hit) */
.vkey-rage-hit {
  --border-color: #D32F2F;
  --neon-color: #FF1744;
  --bg-soft: #2A0000;
  --wave-color: #7f0000;
  --core-bright: #FFEBEE;
  --glow-radius: 15px;
}

.vkey-rage-hit .spell-graphic-icon {
  width: 35px;
  height: 45px;
  clip-path: polygon(10% 0%, 30% 30%, 35% 70%, 10% 100%, 50% 10%, 60% 45%, 55% 75%, 45% 100%, 90% 20%, 85% 55%, 75% 100%);
}

/* 4. Vague Tranchante (vkey-spin-attack) */
.vkey-spin-attack {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 12px;
}

.vkey-spin-attack .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 15%, 85% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 15% 75%, 15% 15%);
}

/* 5. Lame de Feu (vkey-slash) */
.vkey-slash {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 14px;
}

.vkey-slash .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 15%, 85% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 15% 75%, 15% 15%);
}

/* 6. Tornade d'Épées (vkey-wind-slice) */
.vkey-wind-slice {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 12px;
}

.vkey-wind-slice .spell-graphic-icon {
  width: 25px;
  height: 50px;
  clip-path: polygon(50% 0%, 85% 15%, 85% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 15% 75%, 15% 15%);
}

/* 7. Coup Handicapant (vkey-ground-smash) */
.vkey-ground-smash {
  --border-color: #78909C;
  --neon-color: #90A4AE;
  --bg-soft: #1a2327;
  --wave-color: #37474F;
  --core-bright: #ECEFF1;
  --glow-radius: 8px;
}

.vkey-ground-smash .spell-graphic-icon {
  width: 35px;
  height: 40px;
  clip-path: polygon(0% 20%, 20% 0%, 100% 80%, 80% 100%);
}

/* 8. Souffle du Guerrier (vkey-charge) */
.vkey-charge {
  --border-color: #78909C;
  --neon-color: #90A4AE;
  --bg-soft: #1a2327;
  --wave-color: #37474F;
  --core-bright: #ECEFF1;
  --glow-radius: 10px;
}

.vkey-charge .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(0% 100%, 0% 65%, 15% 45%, 35% 55%, 60% 20%, 75% 0%, 80% 15%, 70% 35%, 100% 100%);
}

/* 9. Courroux Aqueux (vkey-ricochet) */
.vkey-ricochet {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 12px;
}

.vkey-ricochet .spell-graphic-icon {
  width: 32px;
  height: 50px;
  clip-path: polygon(70% 0%, 15% 55%, 50% 55%, 30% 100%, 85% 45%, 50% 45%);
}

/* 10. Couperet Enflammé (vkey-ignite) */
.vkey-ignite {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 14px;
}

.vkey-ignite .spell-graphic-icon {
  width: 20px;
  height: 50px;
  clip-path: polygon(0% 0%, 100% 20%, 70% 80%, 100% 80%, 100% 100%, 0% 100%);
}

/* 11. Bourrasque (vkey-trackers-storm ou vkey-storm) */
.vkey-storm {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 12px;
}

.vkey-storm .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(0% 100%, 0% 65%, 15% 45%, 35% 55%, 60% 20%, 75% 0%, 80% 15%, 70% 35%, 100% 100%);
}

/* 12. Séisme (vkey-quake) */
.vkey-quake {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 10px;
}

.vkey-quake .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(0% 40%, 45% 0%, 100% 40%, 80% 100%, 20% 100%);
}

/* 13. Bénédiction Marine (vkey-focus) */
.vkey-focus {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 14px;
}

.vkey-focus .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 14. Fracas de Vagues (vkey-shockwave) */
.vkey-shockwave {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 13px;
}

.vkey-shockwave .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(0% 100%, 0% 65%, 15% 45%, 35% 55%, 60% 20%, 75% 0%, 80% 15%, 70% 35%, 100% 100%);
}

/* 15. Cercle de Feu (vkey-fire) */
.vkey-fire {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 15px;
}

.vkey-fire .spell-graphic-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 6px solid #fff;
}

/* 16. Assaut Céleste (vkey-spin-attack ou équivalent) */
/* (Déjà géré par vkey-spin-attack ci-dessus) */

/* 17. Colère Divine (vkey-execution) */
.vkey-execution {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #7B1FA2;
  --core-bright: #E8EAF6;
  --glow-radius: 18px;
}

.vkey-execution .spell-graphic-icon {
  width: 32px;
  height: 50px;
  clip-path: polygon(70% 0%, 15% 55%, 50% 55%, 30% 100%, 85% 45%, 50% 45%);
}

/* 18. Fureur Incandescente (vkey-focus) */
/* (Déjà géré par vkey-focus ci-dessus) */

/* 19. Déluge de Lames (vkey-deluge) */
.vkey-deluge {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 14px;
}

.vkey-deluge .spell-graphic-icon {
  width: 30px;
  height: 50px;
  clip-path: polygon(10% 0%, 40% 100%, 60% 100%, 90% 0%);
}

/* 20. Jugement de Feu (vkey-apocalypse) */
.vkey-apocalypse {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 16px;
}

.vkey-apocalypse .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(50% 100%, 85% 85%, 85% 25%, 100% 25%, 100% 18%, 65% 18%, 65% 0%, 35% 0%, 35% 18%, 0% 18%, 0% 25%, 15% 25%, 15% 85%);
}

/* ==========================================================================
   ALIGNEMENT DES CLÉS POUR LES 20 SORTS DU MAGE
   ========================================================================== */

/* 21. Glace Rapide (vkey-frost-rune) */
.vkey-frost-rune {
  --border-color: #80CBC4;
  --neon-color: #4DB6AC;
  --bg-soft: #002b28;
  --wave-color: #004D40;
  --core-bright: #FFFFFF;
  --glow-radius: 12px;
}

.vkey-frost-rune .spell-graphic-icon {
  width: 30px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 20% 100%, 0% 35%);
}

/* 22. Roc Écraseur (vkey-bone-spike) */
.vkey-bone-spike {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 11px;
}

.vkey-bone-spike .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* 23. Armure de Pierre (vkey-ritual) */
.vkey-ritual {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 13px;
}

.vkey-ritual .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 24. Jet d'Eau (vkey-soul-drain) */
.vkey-soul-drain {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 11px;
}

.vkey-soul-drain .spell-graphic-icon {
  width: 25px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* 25. Projectile de Feu (vkey-spark) */
.vkey-spark {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 12px;
}

.vkey-spark .spell-graphic-icon {
  width: 25px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* 26. Glace Entravante (vkey-freeze) */
.vkey-freeze {
  --border-color: #80CBC4;
  --neon-color: #4DB6AC;
  --bg-soft: #002b28;
  --wave-color: #004D40;
  --core-bright: #FFFFFF;
  --glow-radius: 13px;
}

.vkey-freeze .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(0% 0%, 50% 15%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* 27. Gravité Accrue (vkey-bone-lance) */
.vkey-bone-lance {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #7B1FA2;
  --core-bright: #E8EAF6;
  --glow-radius: 15px;
}

.vkey-bone-lance .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 35%, 100% 100%, 0% 100%, 0% 35%);
}

/* 28. Vent de Célérité (vkey-power-blast) */
.vkey-power-blast {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 12px;
}

.vkey-power-blast .spell-graphic-icon {
  width: 45px;
  height: 25px;
  clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 70% 50%, 100% 100%, 30% 100%);
}

/* 29. Déluge Entravant (vkey-chaos) */
.vkey-chaos {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 14px;
}

.vkey-chaos .spell-graphic-icon {
  width: 35px;
  height: 45px;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

/* 30. Flamme Étouffante (vkey-fire) */
/* (Déjà configuré ou hérité par vkey-fire) */

/* 31. Tornade Arcane (vkey-storm) */
/* (Déjà géré par vkey-storm du Guerrier) */

/* 32. Tremblement de Terre (vkey-automatique-meteor) */
.vkey-meteor {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 14px;
}

.vkey-meteor .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(0% 70%, 20% 10%, 45% 55%, 70% 0%, 100% 80%, 50% 100%);
}

/* 33. Flux Aquatique (vkey-focus) */
/* (Déjà géré par vkey-focus du Guerrier) */

/* 34. Geyser Majeur (vkey-ice-explosion) */
.vkey-ice-explosion {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 15px;
}

.vkey-ice-explosion .spell-graphic-icon {
  width: 30px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 100%, 70% 100%, 50% 30%, 30% 100%, 0% 100%);
}

/* 35. Nova de Feu (vkey-nova) */
.vkey-nova {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 18px;
}

.vkey-nova .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* 36. Ouragan Cosmique (vkey-storm-arrow) */
.vkey-storm-arrow {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #7B1FA2;
  --core-bright: #E8EAF6;
  --glow-radius: 18px;
}

.vkey-storm-arrow .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(0% 100%, 0% 65%, 15% 45%, 35% 55%, 60% 20%, 75% 0%, 80% 15%, 70% 35%, 100% 100%);
}

/* 37. Écrasement Météore (vkey-supernova) */
/* (Déjà configuré ci-dessous / partagé) */

/* 38. Esprit de l'Embrasement (vkey-focus) */
/* (Hérité par vkey-focus) */

/* 39. Tsunami Arcane (vkey-deluge) */
/* (Déjà géré par vkey-deluge du Guerrier) */

/* 40. Supernova (vkey-supernova) */
.vkey-supernova {
  --border-color: #FF5722;
  --neon-color: #FF6E40;
  --bg-soft: #21113a;
  --wave-color: #673AB7;
  --core-bright: #FFD7FF;
  --glow-radius: 30px;
}

.vkey-supernova .spell-graphic-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent;
  border: 5px solid #fff;
  box-shadow: 0 0 20px #E91E63;
}


/* ==========================================================================
   ALIGNEMENT DES CLÉS POUR LES 20 SORTS DE L'ARCHER
   ========================================================================== */

/* 41. Flèche de Vent (vkey-wind-feather) */
.vkey-wind-feather {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 12px;
}

.vkey-wind-feather .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 42. Flèche de Pierre (vkey-heavy-arrow) */
.vkey-heavy-arrow {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 11px;
}

.vkey-heavy-arrow .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 43. Concentration du Chasseur (vkey-focus-arrow) */
.vkey-focus-arrow {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 14px;
}

.vkey-focus-arrow .spell-graphic-icon {
  width: 35px;
  height: 35px;
  clip-path: polygon(0% 35%, 35% 35%, 50% 0%, 65% 35%, 100% 35%, 75% 60%, 85% 100%, 50% 75%, 15% 100%, 25% 60%);
}

/* 44. Flèche de Glace (vkey-ice-arrow) */
.vkey-ice-arrow {
  --border-color: #80CBC4;
  --neon-color: #4DB6AC;
  --bg-soft: #002b28;
  --wave-color: #004D40;
  --core-bright: #FFFFFF;
  --glow-radius: 13px;
}

.vkey-ice-arrow .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 45. Flèche de Feu (vkey-fire-arrow) */
.vkey-fire-arrow {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 14px;
}

.vkey-fire-arrow .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 46. Tir Entravant d'Air (vkey-quick-shot) */
.vkey-quick-shot {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 12px;
}

.vkey-quick-shot .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 47. Tir Entravant de Terre (vkey-hawk-eye) */
.vkey-hawk-eye {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 11px;
}

.vkey-hawk-eye .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 48. Instinct de l'Archer (vkey-assassin) */
.vkey-assassin {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 13px;
}

.vkey-assassin .spell-graphic-icon {
  width: 35px;
  height: 35px;
  clip-path: polygon(0% 35%, 35% 35%, 50% 0%, 65% 35%, 100% 35%, 75% 60%, 85% 100%, 50% 75%, 15% 100%, 25% 60%);
}

/* 49. Tir Entravant d'Eau (vkey-poison) */
.vkey-poison {
  --border-color: #29B6F6;
  --neon-color: #0091EA;
  --bg-soft: #001731;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 12px;
}

.vkey-poison .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 50. Tir Entravant de Feu (vkey-explosive) */
.vkey-explosive {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 13px;
}

.vkey-explosive .spell-graphic-icon {
  width: 28px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* 51. Pluie de Flèches d'Air (vkey-rain) */
.vkey-rain {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 14px;
}

.vkey-rain .spell-graphic-icon {
  width: 35px;
  height: 45px;
  clip-path: polygon(0% 30%, 30% 0%, 70% 100%, 100% 70%);
}

/* 52. Pluie de Flèches de Terre (vkey-storm-arrow) */
/* (Déjà géré par vkey-storm-arrow du Mage) */

/* 53. Grâce de Poséidon (vkey-focus-arrow) */
/* (Identique / Partagé avec vkey-focus-arrow) */

/* 54. Pluie de Flèches d'Eau (vkey-ricochet) */
/* (Hérité / Géré par vkey-ricochet du Guerrier) */

/* 55. Pluie de Flèches de Feu (vkey-fire-rain) */
.vkey-fire-rain {
  --border-color: #FF5722;
  --neon-color: #FF3D00;
  --bg-soft: #2D0B00;
  --wave-color: #BF360C;
  --core-bright: #FFF5EE;
  --glow-radius: 15px;
}

.vkey-fire-rain .spell-graphic-icon {
  width: 35px;
  height: 45px;
  clip-path: polygon(0% 30%, 30% 0%, 70% 100%, 100% 70%);
}

/* 56. Œil du Cyclone (vkey-ultimate-arrow) */
.vkey-ultimate-arrow {
  --border-color: #80DEEA;
  --neon-color: #00E5FF;
  --bg-soft: #001f24;
  --wave-color: #00838F;
  --core-bright: #E0F7FA;
  --glow-radius: 16px;
}

.vkey-ultimate-arrow .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 50% 25%, 75% 50%, 50% 75%, 25% 50%);
}

/* 57. Flèche Perforante (vkey-play-pierce) */
.vkey-pierce {
  --border-color: #AED581;
  --neon-color: #64DD17;
  --bg-soft: #0d2303;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 15px;
}

.vkey-pierce .spell-graphic-icon {
  width: 20px;
  height: 55px;
  clip-path: polygon(50% 0%, 100% 30%, 65% 25%, 65% 100%, 35% 100%, 35% 25%, 0% 30%);
}

/* 58. Fureur du Volcan (vkey-focus-arrow) */
/* (Déjà géré dynamiquement par l'appel de classe de base) */

/* 59. Flèche de Tsunami (vkey-deluge) */
/* (Hérité / Géré par vkey-deluge) */

/* 60. Flèche d'Apocalypse (vkey-death-rain) */
.vkey-death-rain {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #FF1744;
  --core-bright: #E8EAF6;
  --glow-radius: 22px;
}

.vkey-death-rain .spell-graphic-icon {
  width: 32px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 45%, 70% 35%, 60% 35%, 60% 100%, 40% 100%, 40% 35%, 30% 35%, 0% 45%);
}

/* ==========================================================================
   ALIGNEMENT DES CLÉS POUR LES 20 SORTS DU NÉCROMANCIEN
   ========================================================================== */

/* 61. Souffle Spectral (vkey-shadow) */
.vkey-shadow {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 13px;
}

.vkey-shadow .spell-graphic-icon {
  width: 42px;
  height: 42px;
  clip-path: polygon(0% 100%, 0% 65%, 15% 45%, 35% 55%, 60% 20%, 75% 0%, 80% 15%, 70% 35%, 100% 100%);
}

/* 62. Poing du Fossoyeur (vkey-bone-spike) */
/* (Partagé avec vkey-bone-spike du Mage) */

/* 63. Armure d'Os (vkey-ritual) */
/* (Partagé avec vkey-ritual) */

/* 64. Drain Aquatique (vkey-drain_vital) */
.vkey-drain_vital {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #002171;
  --core-bright: #CCFF90;
  --glow-radius: 12px;
}

.vkey-drain_vital .spell-graphic-icon {
  width: 32px;
  height: 45px;
  clip-path: polygon(50% 100%, 100% 35%, 50% 0%, 0% 35%);
}

/* 65. Trait d'Ombre (vkey-shadow) */
/* (Hérité / Partagé avec vkey-shadow ci-dessus) */

/* 66. Vent Tombal (vkey-curse) */
.vkey-curse {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 13px;
}

.vkey-curse .spell-graphic-icon {
  width: 45px;
  height: 25px;
  clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 70% 50%, 100% 100%, 30% 100%);
}

/* 67. Emprise Osseuse (vkey-bone-lance) */
/* (Hérité / Partagé avec vkey-bone-lance) */

/* 68. Esprit Spectral (vkey-ritual) */
/* (Partagé avec vkey-ritual) */

/* 69. Drain d'Âme (vkey-soul-drain) */
/* (Hérité / Partagé avec vkey-soul-drain du Mage) */

/* 70. Malédiction de Feu (vkey-curse) */
/* (Hérité / Partagé avec vkey-curse) */

/* 71. Nuage Toxique (vkey-poison-cloud) */
.vkey-poison-cloud {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 14px;
}

.vkey-poison-cloud .spell-graphic-icon {
  width: 40px;
  height: 40px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

/* 72. Éruption d'Os (vkey-bone-rain) */
.vkey-bone-rain {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 16px;
}

.vkey-bone-rain .spell-graphic-icon {
  width: 35px;
  height: 50px;
  clip-path: polygon(0% 100%, 30% 20%, 50% 60%, 70% 10%, 100% 100%);
}

/* 73. Pacte de Sang (vkey-ritual) */
/* (Hérité / Partagé avec vkey-ritual) */

/* 74. Explosion de Cadavres (vkey-corpse) */
.vkey-corpse {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 18px;
}

.vkey-corpse .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(50% 0%, 65% 30%, 100% 20%, 80% 55%, 95% 100%, 50% 75%, 5% 100%, 20% 55%, 0% 20%, 35% 30%);
}

/* 75. Nova d'Ombre (vkey-death-aura) */
.vkey-death-aura {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 17px;
}

.vkey-death-aura .spell-graphic-icon {
  width: 45px;
  height: 45px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

/* 76. Apocalypse Spectrale (vkey-apocalypse) */
/* (Déjà configuré / Partagé avec vkey-apocalypse) */

/* 77. Golem d'Os (vkey-bone-lance) */
/* (Hérité / Partagé avec vkey-bone-lance) */

/* 78. Puissance Nécrotique (vkey-ritual) */
/* (Partagé avec vkey-ritual) */

/* 79. Déluge de Sang (vkey-deluge) */
/* (Hérité / Géré par vkey-deluge) */

/* 80. Jugement Dernier (vkey-doom) */
.vkey-doom {
  --border-color: #311B92;
  --neon-color: #00E676;
  --bg-soft: #0c001a;
  --wave-color: #4A148C;
  --core-bright: #CCFF90;
  --glow-radius: 25px;
}

.vkey-doom .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(50% 100%, 85% 85%, 85% 25%, 100% 25%, 100% 18%, 65% 18%, 65% 0%, 35% 0%, 35% 18%, 0% 18%, 0% 25%, 15% 25%, 15% 85%);
}

/* ==========================================
   VISUALS FOR BASIC ATTACKS / WEAPONS
   ========================================== */

/* Unarmed / Punch (vkey-punch) */
.vkey-punch {
  --border-color: #ff9f43;
  --neon-color: #ff5252;
  --bg-soft: #2d0000;
  --wave-color: #b71c1c;
  --core-bright: #ffebeb;
  --glow-radius: 12px;
}
.vkey-punch .spell-graphic-icon {
  width: 36px;
  height: 30px;
  clip-path: polygon(
    0% 40%, 20% 20%, 40% 20%, 45% 10%, 60% 10%, 65% 20%, 80% 20%, 85% 35%, 100% 40%, 95% 65%, 80% 90%, 20% 90%, 5% 65%
  );
}

/* Sword (vkey-sword) */
.vkey-sword {
  --border-color: #b0bec5;
  --neon-color: #cfd8dc;
  --bg-soft: #1c272c;
  --wave-color: #37474f;
  --core-bright: #ffffff;
  --glow-radius: 10px;
}
.vkey-sword .spell-graphic-icon {
  width: 14px;
  height: 50px;
  clip-path: polygon(
    50% 0%, 80% 15%, 80% 75%, 100% 75%, 100% 82%, 65% 82%, 65% 100%, 35% 100%, 35% 82%, 0% 82%, 0% 75%, 20% 75%, 20% 15%
  );
}

/* Bow (vkey-bow) */
.vkey-bow {
  --border-color: #aed581;
  --neon-color: #8bc34a;
  --bg-soft: #1b2e10;
  --wave-color: #33691e;
  --core-bright: #f1f8e9;
  --glow-radius: 11px;
}
.vkey-bow .spell-graphic-icon {
  width: 36px;
  height: 44px;
  clip-path: polygon(
    15% 0%, 50% 10%, 85% 0%, 75% 20%, 90% 45%, 75% 70%, 85% 100%, 50% 90%, 15% 100%, 25% 70%, 10% 45%, 25% 20%
  );
}

/* Staff (vkey-staff) */
.vkey-staff {
  --border-color: #80deea;
  --neon-color: #00e5ff;
  --bg-soft: #002635;
  --wave-color: #006064;
  --core-bright: #e0f7fa;
  --glow-radius: 14px;
}
.vkey-staff .spell-graphic-icon {
  width: 22px;
  height: 50px;
  clip-path: polygon(
    50% 0%, 80% 15%, 50% 30%, 60% 30%, 60% 100%, 40% 100%, 40% 30%, 50% 30%, 20% 15%
  );
}

/* Hammer (vkey-hammer) */
.vkey-hammer {
  --border-color: #bcaaa4;
  --neon-color: #8d6e63;
  --bg-soft: #2d1810;
  --wave-color: #4e342e;
  --core-bright: #d7ccc8;
  --glow-radius: 10px;
}
.vkey-hammer .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(
    10% 10%, 90% 10%, 90% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 10% 40%
  );
}

/* Axe (vkey-axe) */
.vkey-axe {
  --border-color: #ffcc80;
  --neon-color: #ffa726;
  --bg-soft: #3e2723;
  --wave-color: #e65100;
  --core-bright: #fff3e0;
  --glow-radius: 12px;
}
.vkey-axe .spell-graphic-icon {
  width: 36px;
  height: 48px;
  clip-path: polygon(
    50% 0%, 80% 10%, 95% 25%, 80% 40%, 60% 40%, 60% 100%, 40% 100%, 40% 40%, 20% 40%, 5% 25%, 20% 10%
  );
}

/* Shovel (vkey-shovel) */
.vkey-shovel {
  --border-color: #ffe082;
  --neon-color: #ffb300;
  --bg-soft: #2e1a00;
  --wave-color: #ff6f00;
  --core-bright: #fff8e1;
  --glow-radius: 11px;
}
.vkey-shovel .spell-graphic-icon {
  width: 22px;
  height: 48px;
  clip-path: polygon(
    50% 0%, 90% 15%, 80% 45%, 60% 45%, 60% 90%, 80% 90%, 80% 100%, 20% 100%, 20% 90%, 40% 90%, 40% 45%, 20% 45%, 10% 15%
  );
}

/* Custom visuals for new spells */
.vkey-amplification {
  --border-color: #FFD700;
  --neon-color: #FF8C00;
  --bg-soft: #301800;
  --wave-color: #FF4500;
  --core-bright: #FFFFFF;
  --glow-radius: 16px;
}
.vkey-amplification .spell-graphic-icon {
  width: 40px;
  height: 45px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
}

.vkey-pushback {
  --border-color: #40E0D0;
  --neon-color: #00F5FF;
  --bg-soft: #00222b;
  --wave-color: #008b8b;
  --core-bright: #E0FFFF;
  --glow-radius: 14px;
}
.vkey-pushback .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(0% 20%, 40% 20%, 40% 0%, 100% 50%, 40% 100%, 40% 80%, 0% 80%);
}

.vkey-teleport {
  --border-color: #E040FB;
  --neon-color: #D500F9;
  --bg-soft: #1b002c;
  --wave-color: #8E24AA;
  --core-bright: #F5F5F5;
  --glow-radius: 15px;
}
.vkey-teleport .spell-graphic-icon {
  width: 38px;
  height: 44px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.vkey-entrave {
  --border-color: #CDDC39;
  --neon-color: #8BC34A;
  --bg-soft: #1B2E0F;
  --wave-color: #33691E;
  --core-bright: #DCEDC8;
  --glow-radius: 13px;
}
.vkey-entrave .spell-graphic-icon {
  width: 36px;
  height: 45px;
  clip-path: polygon(30% 40%, 30% 0%, 70% 0%, 70% 40%, 100% 40%, 100% 100%, 0% 100%, 0% 40%);
}

/* Inherited color mappings for lvl classes */
[class*="vkey-storm-"] {
  --border-color: #90CAF9;
  --neon-color: #42A5F5;
  --bg-soft: #0d2b45;
  --wave-color: #1565C0;
  --core-bright: #E3F2FD;
  --glow-radius: 13px;
}
[class*="vkey-quake-"] {
  --border-color: #ffcc80;
  --neon-color: #ffa726;
  --bg-soft: #2e1a00;
  --wave-color: #e65100;
  --core-bright: #fff3e0;
  --glow-radius: 13px;
}
[class*="vkey-deluge-"] {
  --border-color: #80deea;
  --neon-color: #26c6da;
  --bg-soft: #002d33;
  --wave-color: #006064;
  --core-bright: #e0f7fa;
  --glow-radius: 13px;
}
[class*="vkey-supernova-"] {
  --border-color: #ffab91;
  --neon-color: #ff7043;
  --bg-soft: #3e1b0f;
  --wave-color: #d84315;
  --core-bright: #fbe9e7;
  --glow-radius: 14px;
}
[class*="vkey-shadow-"] {
  --border-color: #00E676;
  --neon-color: #00B0FF;
  --bg-soft: #001200;
  --wave-color: #1B5E20;
  --core-bright: #CCFF90;
  --glow-radius: 13px;
}
[class*="vkey-bone-spike-"] {
  --border-color: #8D6E63;
  --neon-color: #A1887F;
  --bg-soft: #2D1B16;
  --wave-color: #5D4037;
  --core-bright: #FFE0B2;
  --glow-radius: 11px;
}
[class*="vkey-drain_vital-"] {
  --border-color: #4DB6AC;
  --neon-color: #00897B;
  --bg-soft: #002621;
  --wave-color: #004D40;
  --core-bright: #E0F2F1;
  --glow-radius: 12px;
}
[class*="vkey-curse-"] {
  --border-color: #D32F2F;
  --neon-color: #F44336;
  --bg-soft: #2c0b0b;
  --wave-color: #B71C1C;
  --core-bright: #FFEBEE;
  --glow-radius: 12px;
}
[class*="vkey-bone-lance-"] {
  --border-color: #BA68C8;
  --neon-color: #AA00FF;
  --bg-soft: #1A0033;
  --wave-color: #7B1FA2;
  --core-bright: #E8EAF6;
  --glow-radius: 15px;
}
[class*="vkey-soul-drain-"] {
  --border-color: #4FC3F7;
  --neon-color: #0288D1;
  --bg-soft: #002738;
  --wave-color: #01579B;
  --core-bright: #E1F5FE;
  --glow-radius: 13px;
}
[class*="vkey-poison-cloud-"] {
  --border-color: #AED581;
  --neon-color: #689F38;
  --bg-soft: #1e2f11;
  --wave-color: #33691E;
  --core-bright: #F1F8E9;
  --glow-radius: 12px;
}
[class*="vkey-bone-rain-"] {
  --border-color: #FFB74D;
  --neon-color: #F57C00;
  --bg-soft: #2f1905;
  --wave-color: #E65100;
  --core-bright: #FFF3E0;
  --glow-radius: 13px;
}
[class*="vkey-corpse-"] {
  --border-color: #D32F2F;
  --neon-color: #C2185B;
  --bg-soft: #2c0b16;
  --wave-color: #880E4F;
  --core-bright: #FCE4EC;
  --glow-radius: 14px;
}
[class*="vkey-death-aura-"] {
  --border-color: #CE93D8;
  --neon-color: #AB47BC;
  --bg-soft: #2a0835;
  --wave-color: #4A148C;
  --core-bright: #F3E5F5;
  --glow-radius: 14px;
}
[class*="vkey-apocalypse-"] {
  --border-color: #FF1744;
  --neon-color: #D50000;
  --bg-soft: #2d0000;
  --wave-color: #B71C1C;
  --core-bright: #FFEBEE;
  --glow-radius: 16px;
}
[class*="vkey-doom-"] {
  --border-color: #FF3D00;
  --neon-color: #DD2C00;
  --bg-soft: #3a0a00;
  --wave-color: #5D4037;
  --core-bright: #FFECE7;
  --glow-radius: 15px;
}

/* Tier Shapes */
[class*="-lvl100"] .spell-graphic-icon {
  width: 32px;
  height: 40px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) !important; /* Pentagon */
}

[class*="-lvl120"] .spell-graphic-icon {
  width: 38px;
  height: 42px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important; /* Hexagon */
}

[class*="-lvl140"] .spell-graphic-icon {
  width: 40px;
  height: 40px;
  clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%) !important; /* 8-Pointed Star */
}

[class*="-lvl160"] .spell-graphic-icon {
  width: 36px;
  height: 44px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important; /* Diamond Shield */
}

[class*="-lvl180"] .spell-graphic-icon {
  width: 38px;
  height: 42px;
  clip-path: polygon(50% 0%, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%, 15% 15%) !important; /* Octagon */
}