Introduce la primitiva Card e sistema tocco e accessibilità dei componenti

`rounded-3xl bg-card p-4 shadow-card` era ricopiato a mano 22 volte: cambiare
raggio od ombra voleva dire toccare venti file. `Card` in `ui-bits.tsx` è ora
l'unica definizione delle superfici, con la gerarchia dei raggi scritta invece
che implicita (contenitore 3xl, elemento interno 2xl, controllo full).

Tocco e tastiera:
- i chip presenza di `EventoCard` erano alti ~28 px ed è il controllo più
  toccato dell'app: ora `min-h-11`, con 8 px di spazio fra l'uno e l'altro;
- stessa cura per il link «Apri partita», la chiusura di `CelebrazioneBadge` e
  il titolo di `SezioneTendina`;
- `aria-pressed` sui controlli a stato, `aria-controls` sulle tendine (che
  avevano `aria-expanded` senza il pannello a cui si riferisce), `aria-busy`
  sui caricamenti;
- `BottomNav`: lo stato attivo era comunicato solo dal colore. Ora cambia
  anche il peso del testo, compare una barretta sopra l'icona e c'è
  `aria-current="page"`. La voce «Home» diventa «Oggi», che dice cosa
  contiene. La barra è un materiale traslucido con bordo sfumato al posto
  della riga netta.
- `Barra` espone `role="progressbar"` con i valori.

Il testo sotto i 12 px è sparito (108 occorrenze fra `text-[9px]`,
`text-[10px]` e `text-[11px]`): sotto quella soglia la leggibilità cala e su
iOS non scala con Dynamic Type. La gerarchia la fanno peso e maiuscolo.

`Avatar` aveva `alt="Foto di 12"` quando il fallback è il numero di maglia —
non descrive niente e il nome è già scritto accanto, quindi alt vuoto. Aggiunti
`width`/`height` per non far saltare il layout al caricamento.

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

src/components/crapp/SerieCard.tsx

@@ -1,5 +1,6 @@
 import { Flame } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import type { Giocatore } from "@/lib/crapp-data";
 import { serieGiocatore, serieMigliore } from "@/lib/serie";
 import { Barra } from "@/components/motion/Barra";
@@ -28,7 +29,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
               </span>
               <div className="min-w-0 flex-1">
                 <p className="text-sm font-bold leading-tight">{s.def.label}</p>
-                <p className="text-[11px] text-muted-foreground">{s.def.descrizione}</p>
+                <p className="text-xs text-muted-foreground">{s.def.descrizione}</p>
               </div>
               <span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
                 <Flame
@@ -38,7 +39,7 @@ export function SerieGriglia({ g }: { g: Giocatore }) {
               </span>
             </div>
             <Barra percentuale={s.progresso} trackClassName="mt-3" />
-            <p className="mt-2 text-[11px] text-muted-foreground">
+            <p className="mt-2 text-xs text-muted-foreground">
               {s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
               {s.messaggio}
             </p>
@@ -54,7 +55,7 @@ export function SerieHome({ g }: { g: Giocatore }) {
   const top = serieMigliore(g);
   const Icon = top.def.icon;
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center gap-3">
         <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-accent-grad text-accent-foreground">
           <Icon className="h-5 w-5" />
@@ -63,19 +64,19 @@ export function SerieHome({ g }: { g: Giocatore }) {
           <p className="text-sm font-bold leading-tight">
             Serie {top.def.label.toLowerCase()}: {top.valore}
           </p>
-          <p className="text-[11px] text-muted-foreground">{top.messaggio}</p>
+          <p className="text-xs text-muted-foreground">{top.messaggio}</p>
         </div>
       </div>
       <div className="mt-3 grid grid-cols-3 gap-2">
         {serieGiocatore(g).map((s) => (
           <div key={s.def.tipo} className="rounded-2xl bg-secondary p-2 text-center">
             <p className="font-display text-xl leading-none">{s.valore}</p>
-            <p className="mt-1 text-[10px] font-semibold uppercase text-muted-foreground">
+            <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
               {s.def.label}
             </p>
           </div>
         ))}
       </div>
-    </div>
+    </Card>
   );
 }