add abbreviations for rarity

src/components/CardItem.tsx

@@ -11,6 +11,29 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
   const hasHolo = !!(card.variants?.holofoil || (card.tcgplayer as any)?.prices?.holofoil);
   const hasReverse = !!(card.variants?.reverseHolofoil || (card.tcgplayer as any)?.prices?.reverseHolofoil);
   const prices = (card as any).tcgplayer?.prices || {};
+  const rarityFull = card.rarity || '';
+  const rarityAbbr = (() => {
+    const r = rarityFull.toLowerCase();
+    // Specific token-based shortcuts first
+    if (r.includes('vmax')) return 'VMAX';
+    if (r.includes('vstar')) return 'VSTAR';
+    if (r.includes('gx')) return 'GX';
+    if (r.includes('ex')) return 'EX';
+    if (r.includes('v ')) return 'V';
+    if (r === 'v') return 'V';
+    if (r.includes('secret')) return 'SR';
+    if (r.includes('ultra')) return 'UR';
+    if (r.includes('reverse')) return 'RH';
+    if (r.includes('holo')) return 'HR';
+    if (r.includes('promo')) return 'P';
+    // Specific before generic 'rare'
+    if (r.includes('illustration') && r.includes('rare')) return 'IR';
+    if (r.includes('rare')) return 'R';
+    if (r.includes('uncommon')) return 'U';
+    if (r.includes('common')) return 'C';
+    // Fallback: first letter of first word uppercased
+    return rarityFull ? rarityFull.charAt(0).toUpperCase() : '';
+  })();
   const getPrice = (key: VariantKey): number | undefined => {
     const map: Record<VariantKey, string> = {
       base: 'normal',
@@ -45,7 +68,14 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
       <div className="p-3 flex flex-col gap-2">
         <div className="flex items-center justify-between">
           <h3 className="font-medium truncate" title={`${card.name} #${card.number}`}>{card.name} <span className="text-slate-500">#{card.number}</span></h3>
-          {card.rarity ? <span className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600">{card.rarity}</span> : null}
+          {rarityFull ? (
+            <span
+              className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600"
+              title={rarityFull}
+            >
+              {rarityAbbr}
+            </span>
+          ) : null}
         </div>
         <SetBadge set={card.set} />
         <div className="pt-1 flex flex-wrap gap-2">