feat: Enforce mutual exclusivity for bond feelings

Reorder feelings so opposing pairs (Admiration/Inferiority, Loyalty/Mistrust, Hatred/Affection) are stacked vertically in the grid. Checking one feeling disables and prevents selecting its opposite.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/CharacterSheet.tsx

@@ -6,12 +6,20 @@ import weaponsFile from "../data/weapons.yml";
 const STATUSES = ["Slow", "Enraged", "Dazed", "Weak", "Poisoned", "Shaken"];
 const FEELINGS = [
   "Admiration",
-  "Inferiority",
   "Loyalty",
+  "Hatred",
+  "Inferiority",
   "Mistrust",
   "Affection",
-  "Hatred",
 ];
+const MUTUAL_EXCLUSIVE: Record<string, string> = {
+  Admiration: "Inferiority",
+  Inferiority: "Admiration",
+  Loyalty: "Mistrust",
+  Mistrust: "Loyalty",
+  Hatred: "Affection",
+  Affection: "Hatred",
+};
 const MARTIAL_ITEMS = [
   "Martial Armor",
   "Martial Shields",
@@ -581,11 +589,13 @@ export default function CharacterSheet() {
       prev.map((b, i) => {
         if (i !== bondIdx) return b;
         const has = b.feelings.includes(feeling);
+        const partner = MUTUAL_EXCLUSIVE[feeling];
+        if (!has && partner && b.feelings.includes(partner)) return b;
         return {
           ...b,
           feelings: has
             ? b.feelings.filter((f) => f !== feeling)
-            : [...b.feelings, feeling],
+            : [...b.feelings.filter((f) => f !== partner), feeling],
         };
       }),
     );
@@ -1039,18 +1049,26 @@ export default function CharacterSheet() {
                   />
                 </div>
                 <div className="bond-feelings">
-                  {FEELINGS.map((feeling) => (
-                    <div
-                      key={feeling}
-                      className={`bond-feeling${bond.feelings.includes(feeling) ? " active" : ""}`}
-                      onClick={() => toggleFeeling(idx, feeling)}
-                    >
-                      <div className="bond-feeling-box">
-                        {bond.feelings.includes(feeling) ? "✓" : ""}
+                  {FEELINGS.map((feeling) => {
+                    const isActive = bond.feelings.includes(feeling);
+                    const isDisabled =
+                      !isActive &&
+                      bond.feelings.includes(MUTUAL_EXCLUSIVE[feeling]);
+                    return (
+                      <div
+                        key={feeling}
+                        className={`bond-feeling${isActive ? " active" : ""}${isDisabled ? " disabled" : ""}`}
+                        onClick={() =>
+                          !isDisabled && toggleFeeling(idx, feeling)
+                        }
+                      >
+                        <div className="bond-feeling-box">
+                          {isActive ? "✓" : ""}
+                        </div>
+                        <span>{feeling}</span>
                       </div>
-                      <span>{feeling}</span>
-                    </div>
-                  ))}
+                    );
+                  })}
                 </div>
               </div>
             ))}

src/fabula-ultima-sheet.css

@@ -582,6 +582,11 @@ input[type="number"] {
   color: var(--teal);
 }
 
+.bond-feeling.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 .bond-feeling-box {
   width: 12px;
   height: 12px;