feat: add DebugName wrappers to 56 components + redesign attunement cards + remove ScrollArea from AttunementsTab

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

@@ -7,6 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Shield, Swords, Clock, Sparkles, Check, Lock, ChevronRight } from 'lucide-react';
 import clsx from 'clsx';
+import { DebugName } from '@/components/game/debug/debug-context';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -81,14 +82,15 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
     : elemDisplays[0]?.name ?? guardian.element;
 
   return (
-    <Card
-      className={clsx(
-        'border transition-colors',
-        status === 'signed' && 'border-green-600/40',
-        status === 'defeated' && 'border-amber-600/40',
-        status === 'undefeated' && 'border-gray-700/60',
-      )}
-    >
+    <DebugName name="GuardianPactsComponents">
+      <Card
+        className={clsx(
+          'border transition-colors',
+          status === 'signed' && 'border-green-600/40',
+          status === 'defeated' && 'border-amber-600/40',
+          status === 'undefeated' && 'border-gray-700/60',
+        )}
+      >
       <CardHeader className="pb-2">
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0">
@@ -141,7 +143,8 @@ export const GuardianCard: React.FC<GuardianCardProps> = React.memo(({
           />
         )}
       </CardContent>
-    </Card>
+      </Card>
+    </DebugName>
   );
 });