feat: restructure guardian progression system with dynamic element support

src/components/game/tabs/guardian-pacts-components.tsx

@@ -26,9 +26,8 @@ interface ElementDisplay {
   color: string;
 }
 
-function getElementDisplays(element: string): ElementDisplay[] {
-  // Combo guardians have elements like "fire+water"
-  const parts = element.split('+');
+function getElementDisplays(element: string | string[]): ElementDisplay[] {
+  const parts = Array.isArray(element) ? element : element.split('+');
   return parts.map((el) => {
     const def = ELEMENTS[el];
     return {
@@ -79,7 +78,7 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
   // Build element label: single element name, or "Fire + Water" for combos
   const elementLabel = isCombo
     ? elemDisplays.map(e => e.name).join(' + ')
-    : elemDisplays[0]?.name ?? guardian.element;
+    : elemDisplays[0]?.name ?? guardian.element.join(' + ');
 
   return (
     <DebugName name="GuardianPactsComponents">