refactor: extract components from SkillsTab.tsx to reduce below 400 lines

src/components/game/tabs/SkillRow.tsx

@@ -10,11 +10,12 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { ChevronRight } from 'lucide-react';
 import type { SkillUpgradeChoice } from '@/lib/game/types';
 import { ELEMENTS } from '@/lib/game/constants';
-import { hasMilestoneUpgrade } from '@/lib/game/hooks/useSkillUpgradeSelection';
 import { formatStudyTime } from '@/lib/game/formatting';
 import { getUpgradesForSkillAtMilestone, getNextTierSkill, getTierMultiplier, SKILL_EVOLUTION_PATHS } from '@/lib/game/skill-evolution';
 import type { ComputedEffects } from '@/lib/game/upgrade-effects.types';
 import { SPECIAL_EFFECTS, hasSpecial } from '@/lib/game/special-effects';
+import { MilestoneProgress } from './MilestoneProgress';
+import { SkillMultipliers } from './SkillMultipliers';
 
 type StudyTarget = { type: 'skill' | 'spell'; id: string; progress: number; required: number; } | null;
 
@@ -126,20 +127,13 @@ export function SkillRow(props: SkillRowProps) {
             Requires: {Object.entries(def.req).map(([r, rl]) => `${r} Lv.${rl}`).join(', ')}
           </div>
         )}
-        <div className="text-xs text-gray-500 mt-1">
-          <span className={speedMult > 1 ? 'text-green-400' : ''}>
-            Study: {formatStudyTime(effectiveStudyTime)}{speedMult > 1 && <span className="text-xs ml-1">({Math.round(speedMult * 100)}% speed)</span>}
-          </span>
-          {' • '}
-          <span className={costMult < 1 ? 'text-green-400' : ''}>
-            Cost: {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>
+        <SkillMultipliers
+          effectiveStudyTime={effectiveStudyTime}
+          speedMult={speedMult}
+          costMult={costMult}
+          cost={cost}
+          additionalCost={additionalCost}
+        />
 
         {hasInsufficientMana && (
           <div className="text-xs text-red-400 mt-1">
@@ -147,11 +141,7 @@ export function SkillRow(props: SkillRowProps) {
           </div>
         )}
 
-        {milestoneInfo && (
-          <div className="text-xs text-amber-400 mt-1 flex items-center gap-1">
-            ⭐ Level {milestoneInfo.milestone} milestone: {milestoneInfo.selectedCount}/2 upgrades selected
-          </div>
-        )}
+        <MilestoneProgress milestoneInfo={milestoneInfo} />
       </div>
 
       <div className="flex items-center gap-3 flex-wrap sm:flex-nowrap">