Add lobby and pack concept.

web/src/components/CardView.tsx

@@ -30,6 +30,31 @@ function useFitText(dep: unknown) {
   return ref
 }
 
+// renderEffect bolds each effect's trigger and renders the colon separating it
+// from the action as an arrow, so "Sell: add 1 extra Apple" shows "Sell →" in
+// bold. Cards can list several effects joined by " · "; each gets its own
+// bolded trigger.
+function renderEffect(text: string) {
+  return text.split(' · ').map((segment, i) => {
+    const colon = segment.indexOf(':')
+    const node =
+      colon === -1 ? (
+        segment
+      ) : (
+        <>
+          <strong>{segment.slice(0, colon)} →</strong>
+          {segment.slice(colon + 1)}
+        </>
+      )
+    return (
+      <span key={i}>
+        {i > 0 && ' · '}
+        {node}
+      </span>
+    )
+  })
+}
+
 interface Props {
   card: Card
   size?: 'sm' | 'md' | 'lg'
@@ -121,7 +146,7 @@ export function CardView({
         <>
           {card.effectText && (
             <div className="card-effect" ref={effectRef}>
-              {card.effectText}
+              {renderEffect(card.effectText)}
             </div>
           )}
           <div className="card-bottom">
@@ -131,7 +156,11 @@ export function CardView({
         </>
       ) : (
         <div className="card-effect" ref={effectRef}>
-          {card.effectText ?? (card.food === 'apple' ? '+1 power (this battle)' : '')}
+          {card.effectText
+            ? renderEffect(card.effectText)
+            : card.food === 'apple'
+              ? '+1 power (this battle)'
+              : ''}
         </div>
       )}
       {selected && <div className="card-check">✓</div>}