Card text scales to fit — every word on the face

Long card texts were clamped at nine lines and cut off mid-rule,
which is how the Speed argument started: the deciding sentence was
in the hidden part. The type now sizes itself to the text length in
six steps (0.6rem down to 0.375rem for the 550-char Firefly Stick),
and the line clamp is gone. Verified against Fear, the longest card
in play at 482 characters: every word on the face.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/Card.svelte

@@ -37,6 +37,18 @@
     }
   });
   const rightRail = $derived(def.los ? "L.O.S." : def.adjacent ? "ADJACENT" : "");
+  // The text box is fixed; the type shrinks until every word fits. Longest
+  // card in the set is ~550 chars (Firefly Stick).
+  const textSize = $derived.by(() => {
+    const n = def.text?.length ?? 0;
+    if (n <= 130) return "0.6rem";
+    if (n <= 200) return "0.56rem";
+    if (n <= 280) return "0.5rem";
+    if (n <= 370) return "0.45rem";
+    if (n <= 470) return "0.41rem";
+    return "0.375rem";
+  });
+  const textLeading = $derived((def.text?.length ?? 0) > 280 ? "1.18" : "1.28");
 </script>
 
 <button
@@ -58,7 +70,7 @@
     {#if leftRail}<span class="rail left">{leftRail}</span>{/if}
     {#if rightRail}<span class="rail right">{rightRail}</span>{/if}
     <span class="name">{def.name}</span>
-    {#if def.text}<span class="text">{def.text}</span>{/if}
+    {#if def.text}<span class="text" style:font-size={textSize} style:line-height={textLeading}>{def.text}</span>{/if}
   {/if}
   {#if displayed}
     <span class="badge">DISPLAYED{charges != null ? ` · ${charges}` : ""}</span>
@@ -142,13 +154,7 @@
   }
   .text {
     font-family: "Archivo Narrow", sans-serif;
-    font-size: 0.56rem;
-    line-height: 1.28;
     overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 9;
-    line-clamp: 9;
-    -webkit-box-orient: vertical;
   }
 
   /* Number cards: a big numeral in a bordered plate, like the originals. */