udpate total count to be all base and variants

src/app/page.tsx

@@ -116,8 +116,15 @@ export default function Page() {
     return bySet;
   }, [cards, query, setId]);
 
-  const filteredCollectedCount = useMemo(() => filtered.filter((c) => isFullyCollected(c)).length, [filtered, checklist]);
-  const filteredUncollectedCount = useMemo(() => filtered.length - filteredCollectedCount, [filtered, filteredCollectedCount]);
+  // Variant-based counts for filtered set
+  const filteredCollectedVariantsCount = useMemo(() => {
+    return filtered.reduce((sum, c) => {
+      const state = checklist[c.id] || {};
+      return sum + availableVariants(c).reduce((acc, k) => acc + (state[k] ? 1 : 0), 0);
+    }, 0);
+  }, [filtered, checklist]);
+  const filteredTotalVariants = useMemo(() => filtered.reduce((sum, c) => sum + availableVariants(c).length, 0), [filtered]);
+  const filteredUncollectedVariantsCount = useMemo(() => filteredTotalVariants - filteredCollectedVariantsCount, [filteredTotalVariants, filteredCollectedVariantsCount]);
 
   const displayed = useMemo(() => {
     return tab === 'collected'
@@ -133,13 +140,20 @@ export default function Page() {
     return Array.from(map.entries()).map(([id, label]) => ({ id, label })).sort((a, b) => a.label.localeCompare(b.label));
   }, [cards]);
 
+  // Overall variant-based totals for header
+  const totalVariantsAll = useMemo(() => cards.reduce((sum, c) => sum + availableVariants(c).length, 0), [cards]);
+  const collectedVariantsAll = useMemo(() => cards.reduce((sum, c) => {
+    const state = checklist[c.id] || {};
+    return sum + availableVariants(c).reduce((acc, k) => acc + (state[k] ? 1 : 0), 0);
+  }, 0), [cards, checklist]);
+
   return (
     <main className="container mx-auto">
       <Header
         query={query}
         onQueryChange={setQuery}
-        total={cards.length}
-        collectedCount={useMemo(() => cards.filter((c) => isFullyCollected(c)).length, [cards, checklist])}
+        total={totalVariantsAll}
+        collectedCount={collectedVariantsAll}
       />
 
       <div className="mb-4 flex flex-wrap items-center gap-3">
@@ -188,7 +202,7 @@ export default function Page() {
               aria-pressed={tab === 'uncollected'}
             >
               Uncollected <span className="ml-1 inline-block rounded bg-white/20 px-1.5 py-0.5 text-xs border border-white/30">
-                {filteredUncollectedCount}
+                {filteredUncollectedVariantsCount}
               </span>
             </button>
             <button
@@ -202,7 +216,7 @@ export default function Page() {
               aria-pressed={tab === 'collected'}
             >
               Collected <span className="ml-1 inline-block rounded bg-white/20 px-1.5 py-0.5 text-xs border border-white/30">
-                {filteredCollectedCount}
+                {filteredCollectedVariantsCount}
               </span>
             </button>
           </div>