Fix border colors

The AI fixed the issue where border colors were not visible in the Knights and Knaves interactive.

src/components/KnightsAndKnavesI.tsx

@@ -176,18 +176,29 @@ const KnightsAndKnavesI = () => {
             <CardTitle className="text-xl">Statements</CardTitle>
           </CardHeader>
           <CardContent className="flex flex-wrap gap-3">
-            {available.map(s => (
+            {available.map(s => {
-              <div
+              const meta = META[s.id];
-                key={s.id}
+              const groupClass = meta.group === "A" ? "logic-a" : meta.group === "B" ? "logic-b" : "logic-s";
-                draggable
+              const styleClass = meta.neg ? "logic-dotted" : "logic-solid";
-                onDragStart={(e) => onDragStart(e, s.id)}
+              const classes = cn(
-                className="cursor-move select-none rounded-md border border-outline bg-surface-variant px-3 py-2 text-sm text-foreground shadow-card"
+                "cursor-move select-none rounded-md bg-surface-variant px-3 py-2 text-sm text-foreground shadow-card border-2",
-                aria-label={`Drag: ${s.label}`}
+                "logic-border",
-                role="button"
+                groupClass,
-              >
+                styleClass
-                {s.label}
+              );
-              </div>
+              return (
-            ))}
+                <div
+                  key={s.id}
+                  draggable
+                  onDragStart={(e) => onDragStart(e, s.id)}
+                  className={classes}
+                  aria-label={`Drag: ${s.label}`}
+                  role="button"
+                >
+                  {s.label}
+                </div>
+              );
+            })}
           </CardContent>
         </Card>