fix skill lookup for slots 3-4 by matching skill group

src/lib/components/artifact/ArtifactSkillDisplay.svelte

@@ -9,6 +9,7 @@
 	 */
 	import {
 		calculateSkillDisplayValue,
+		getSkillGroupForSlot,
 		type ArtifactSkillInstance
 	} from '$lib/types/api/artifact'
 	import { createQuery } from '@tanstack/svelte-query'
@@ -18,19 +19,24 @@
 
 	interface Props {
 		skill: ArtifactSkillInstance
+		/** Skill slot number (1-4) for skill group lookup */
+		skillSlot: number
 		/** Element for max value highlighting */
 		element?: ElementType
 	}
 
-	const { skill, element }: Props = $props()
+	const { skill, skillSlot, element }: Props = $props()
 
 	// Query skills to get the full skill definition
 	const skillsQuery = createQuery(() => artifactQueries.skills())
 
-	// Find the skill definition
+	// Find the skill definition (must match both modifier and skill group)
-	const skillDef = $derived(
+	const skillDef = $derived.by(() => {
-		skillsQuery.data?.find((s) => s.modifier === skill.modifier)
+		const group = getSkillGroupForSlot(skillSlot)
-	)
+		return skillsQuery.data?.find(
+			(s) => s.modifier === skill.modifier && s.skillGroup === group
+		)
+	})
 
 	const suffix = $derived(skillDef?.suffix?.en ?? '')
 	const isNegative = $derived(skillDef?.polarity === 'negative')

src/lib/components/collection/CollectionArtifactDetailPane.svelte

@@ -9,7 +9,7 @@
 	 */
 	import { onMount } from 'svelte'
 	import type { CollectionArtifact, ArtifactSkillInstance } from '$lib/types/api/artifact'
-	import { isQuirkArtifact } from '$lib/types/api/artifact'
+	import { isQuirkArtifact, getSkillGroupForSlot } from '$lib/types/api/artifact'
 	import { createQuery } from '@tanstack/svelte-query'
 	import { artifactQueries } from '$lib/api/queries/artifact.queries'
 	import { useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations'
@@ -59,9 +59,12 @@
 	// Query skill definitions to get names
 	const skillsQuery = createQuery(() => artifactQueries.skills())
 
-	// Get skill name by modifier
+	// Get skill name by modifier and slot (different slots use different skill groups)
-	function getSkillName(skill: ArtifactSkillInstance): string {
+	function getSkillName(skill: ArtifactSkillInstance, slot: number): string {
-		const skillDef = skillsQuery.data?.find((s) => s.modifier === skill.modifier)
+		const group = getSkillGroupForSlot(slot)
+		const skillDef = skillsQuery.data?.find(
+			(s) => s.modifier === skill.modifier && s.skillGroup === group
+		)
 		return skillDef?.name?.en ?? 'Unknown Skill'
 	}
 
@@ -149,10 +152,11 @@
 
 		{#if hasSkills}
 			<DetailsSection title="Skills">
-				{#each skills as skill}
+				{#each skills as skill, index}
+					{@const skillSlot = index + 1}
 					{#if skill}
-						<DetailRow label={getSkillName(skill)}>
+						<DetailRow label={getSkillName(skill, skillSlot)}>
-							<ArtifactSkillDisplay {skill} element={elementType} />
+							<ArtifactSkillDisplay {skill} {skillSlot} element={elementType} />
 						</DetailRow>
 					{/if}
 				{/each}