Use element colors for team portraits

components/public/team-search.tsx

@@ -9,7 +9,7 @@ import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle }
 import { Input } from "@/components/ui/input";
 import { Kbd } from "@/components/ui/kbd";
 import { Separator } from "@/components/ui/separator";
-import { isCustomTravelerKey } from "@/lib/catalog/travelers";
+import { elementBackgroundColor } from "@/lib/catalog/element";
 import { rarityGradientClass } from "@/lib/catalog/rarity";
 import type { PublicGuide } from "@/lib/guides/queries";
 import { cn } from "@/lib/utils";
@@ -77,7 +77,10 @@ export function TeamSearch({ teams }: { teams: PublicGuide["teams"] }) {
                     {team.members.map((member) => (
                       <div key={member.position} className="min-w-0 text-center">
                         <div className="grid grid-cols-3 gap-2">
-                          <div className={cn("relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg bg-muted", rarityGradientClass(isCustomTravelerKey(member.character.key) ? 5 : member.character.rarity))}>
+                          <div
+                            className="relative col-span-2 row-span-2 min-h-0 overflow-hidden rounded-lg"
+                            style={{ backgroundColor: elementBackgroundColor(member.character.element) }}
+                          >
                             <Image
                               src={member.character.imageUrl}
                               alt={member.character.name}