From 94eb08f316a1a84c5e62fe1b20f0d82a910a708f 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:10:05 +0000
Subject: [PATCH] Add new statement and styling

Add "Both of us are knights" statement to the interactive. Update styling for statements and their negations using different border styles and colors to represent A, B, and the statement.
---
 src/components/KnightsAndKnavesI.tsx | 11 +++++++++++
 src/index.css                        | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/components/KnightsAndKnavesI.tsx b/src/components/KnightsAndKnavesI.tsx
index e7e5153..e5ee579 100644
--- a/src/components/KnightsAndKnavesI.tsx
+++ b/src/components/KnightsAndKnavesI.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
 // Statements
 const STATEMENTS = [
   { id: "S", label: "At least one of us is a knave." },
+  { id: "SNEG", label: "Both of us are knights." },
   { id: "AK", label: "A is a knight" },
   { id: "AN", label: "A is a knave" },
   { id: "BK", label: "B is a knight" },
@@ -13,6 +14,15 @@ const STATEMENTS = [
 
 type StatementId = typeof STATEMENTS[number]["id"];
 
+const META: Record<StatementId, { group: "A" | "B" | "S"; neg: boolean }> = {
+  S: { group: "S", neg: false },
+  SNEG: { group: "S", neg: true },
+  AK: { group: "A", neg: false },
+  AN: { group: "A", neg: true },
+  BK: { group: "B", neg: false },
+  BN: { group: "B", neg: true },
+};
+
 const KnightsAndKnavesI = () => {
   const [inArena, setInArena] = useState<StatementId[]>([]);
   const [showExplain, setShowExplain] = useState(false);
@@ -80,6 +90,7 @@ const KnightsAndKnavesI = () => {
         if (ids.has("AN") && aKnight) continue;
         if (ids.has("BK") && !bKnight) continue;
         if (ids.has("BN") && bKnight) continue;
+        if (ids.has("SNEG") && !(aKnight && bKnight)) continue;
 
         // A's utterance if included: S = "At least one is a knave"
         if (ids.has("S")) {
diff --git a/src/index.css b/src/index.css
index 056d54d..4be0dbb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,6 +41,11 @@ All colors MUST be HSL.
     --success: 142 71% 45%;
     --success-foreground: 0 0% 98%;
 
+    /* Logic token colors */
+    --logic-a: 24 94% 50%;
+    --logic-b: 221 83% 53%;
+    --logic-s: 47 95% 57%;
+
     /* Custom design tokens for the boxy aesthetic */
     --surface: 0 0% 100%;
     --surface-variant: 220 13% 96%;
@@ -107,6 +112,11 @@ All colors MUST be HSL.
     --success: 142 71% 45%;
     --success-foreground: 0 0% 98%;
 
+    /* Logic token colors */
+    --logic-a: 24 94% 50%;
+    --logic-b: 221 83% 53%;
+    --logic-s: 47 95% 57%;
+
     /* Dark mode custom tokens */
     --surface: 220 13% 11%;
     --surface-variant: 220 13% 15%;
@@ -141,6 +151,15 @@ All colors MUST be HSL.
   }
 }
 
+@layer components {
+  .logic-a { --logic-color: var(--logic-a); }
+  .logic-b { --logic-color: var(--logic-b); }
+  .logic-s { --logic-color: var(--logic-s); }
+  .logic-border { border-color: hsl(var(--logic-color)) !important; }
+  .logic-dotted { border-style: dotted; }
+  .logic-solid { border-style: solid; }
+}
+
 /* Custom slider styling */
 .slider-special::-webkit-slider-thumb,
 .slider-normal::-webkit-slider-thumb {