From 4b1940859ad4d358d0e13842e534baaf65cea39e Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 8 Aug 2025 07:20:38 +0000
Subject: [PATCH] Fix border colors

The AI fixed the issue where border colors were not visible in the Knights and Knaves interactive.
---
 src/components/KnightsAndKnavesI.tsx | 35 ++++++++++++++++++----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/KnightsAndKnavesI.tsx b/src/components/KnightsAndKnavesI.tsx
index e5ee579..a612f63 100644
--- a/src/components/KnightsAndKnavesI.tsx
+++ b/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 => (
-              <div
-                key={s.id}
-                draggable
-                onDragStart={(e) => onDragStart(e, s.id)}
-                className="cursor-move select-none rounded-md border border-outline bg-surface-variant px-3 py-2 text-sm text-foreground shadow-card"
-                aria-label={`Drag: ${s.label}`}
-                role="button"
-              >
-                {s.label}
-              </div>
-            ))}
+            {available.map(s => {
+              const meta = META[s.id];
+              const groupClass = meta.group === "A" ? "logic-a" : meta.group === "B" ? "logic-b" : "logic-s";
+              const styleClass = meta.neg ? "logic-dotted" : "logic-solid";
+              const classes = cn(
+                "cursor-move select-none rounded-md bg-surface-variant px-3 py-2 text-sm text-foreground shadow-card border-2",
+                "logic-border",
+                groupClass,
+                styleClass
+              );
+              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>