SkillsTab Modifications (Bugs 9,11,12,13)

src/components/game/tabs/AttunementsTab.tsx

@@ -195,14 +195,14 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
                     {def.capabilities.map(cap => (
                       <Badge key={cap} variant="outline" className="text-xs">
                         {cap === 'enchanting' && '✨ Enchanting'}
-                        {cap === 'disenchanting' && '🔄 Disenchant'}
+                        {cap === 'disenchanting' && '🔄 Disenchant'}  // TODO: Remove after bug 13 complete
                         {cap === 'pacts' && '🤝 Pacts'}
                         {cap === 'guardianPowers' && '💜 Guardian Powers'}
                         {cap === 'elementalMastery' && '🌟 Elem. Mastery'}
                         {cap === 'golemCrafting' && '🗿 Golems'}
                         {cap === 'gearCrafting' && '⚒️ Gear'}
                         {cap === 'earthShaping' && '⛰️ Earth Shaping'}
-                        {!['enchanting', 'disenchanting', 'pacts', 'guardianPowers', 
+                        {!['enchanting', 'pacts', 'guardianPowers', 
                            'elementalMastery', 'golemCrafting', 'gearCrafting', 'earthShaping'].includes(cap) && cap}
                       </Badge>
                     ))}
@@ -246,7 +246,7 @@ export function AttunementsTab({ store }: AttunementsTabProps) {
                 >
                   {cat === 'mana' && '💧 Mana'}
                   {cat === 'study' && '📚 Study'}
-                  {cat === 'research' && '🔮 Research'}
+                  {cat === 'research' && '🔮 Research'}  // TODO: Remove after Bug 12 - research moved to mana
                   {cat === 'ascension' && '⭐ Ascension'}
                   {cat === 'enchant' && '✨ Enchanting'}
                   {cat === 'effectResearch' && '🔬 Effect Research'}

src/components/game/tabs/SkillsTab.tsx

@@ -211,8 +211,19 @@ export function SkillsTab({ store }: SkillsTabProps) {
                   const baseCost = def.base * (level + 1) * currentTier;
                   const cost = Math.floor(baseCost * costMult);
                   
+                  // Additional cost (element mana)
+                  const additionalCost = def.cost;
+                  
                   // Can start studying?
-                  const canStudy = !maxed && prereqMet && store.rawMana >= cost && !isStudying;
+                  let canStudy = !maxed && prereqMet && store.rawMana >= cost && !isStudying;
+                  
+                  // Check additional cost (element mana)
+                  if (def.cost && def.cost.type === 'element') {
+                    const element = store.elements[def.cost.element];
+                    if (!element || element.current < def.cost.amount) {
+                      canStudy = false;
+                    }
+                  }
                   
                   // Check for milestone upgrades
                   const milestoneInfo = hasMilestoneUpgrade(tieredSkillId, level, store.skillTiers || {}, store.skillUpgrades);
@@ -266,6 +277,11 @@ export function SkillsTab({ store }: SkillsTabProps) {
                           {' • '}
                           <span className={costMult < 1 ? 'text-green-400' : ''}>
                             Cost: {fmt(cost)} mana{costMult < 1 && <span className="text-xs ml-1">({Math.round(costMult * 100)}% cost)</span>}
+                            {additionalCost && additionalCost.type === 'element' && (
+                              <span className="ml-2" style={{ color: ELEMENTS[additionalCost.element]?.color }}>
+                                + {additionalCost.amount} {ELEMENTS[additionalCost.element]?.sym} {additionalCost.element}
+                              </span>
+                            )}
                           </span>
                         </div>
                         
@@ -325,7 +341,7 @@ export function SkillsTab({ store }: SkillsTabProps) {
                               className={canStudy ? 'bg-purple-600 hover:bg-purple-700' : 'opacity-50'}
                               onClick={() => store.startStudyingSkill(tieredSkillId)}
                             >
-                              Study ({fmt(cost)})
+                              Study ({fmt(cost)}{additionalCost && additionalCost.type === 'element' && ` + ${additionalCost.amount} ${ELEMENTS[additionalCost.element]?.sym}`}
                             </Button>
                             {/* Parallel Study button */}
                             {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.PARALLEL_STUDY) &&