From 5c49294ad15c4473f065917f93e21252785ebcf0 Mon Sep 17 00:00:00 2001
From: Davide Grilli <davide.grilli@outlook.com>
Date: Sat, 5 Sep 2026 12:42:24 +0200
Subject: [PATCH] =?UTF-8?q?Introduce=20la=20primitiva=20Card=20e=20sistema?=
 =?UTF-8?q?=20tocco=20e=20accessibilit=C3=A0=20dei=20componenti?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`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/Avatar.tsx               | 13 +++++-
 src/components/crapp/BadgeDrawer.tsx          | 14 +++----
 src/components/crapp/BottomNav.tsx            | 26 +++++++++---
 src/components/crapp/CelebrazioneBadge.tsx    |  4 +-
 src/components/crapp/CollezioneBadge.tsx      | 32 +++++++--------
 src/components/crapp/EventoCard.tsx           | 24 ++++++-----
 src/components/crapp/Pagelle.tsx              | 23 ++++++-----
 .../crapp/ProfiloAmministrativo.tsx           |  2 +-
 src/components/crapp/RosaPresenze.tsx         | 17 ++++----
 src/components/crapp/ScoutEntry.tsx           |  2 +-
 src/components/crapp/SerieCard.tsx            | 13 +++---
 src/components/crapp/SondaggioCacche.tsx      | 13 +++---
 src/components/crapp/TurnoPalloni.tsx         |  4 +-
 src/components/crapp/VotazioneMvp.tsx         |  8 ++--
 src/components/crapp/VotoSocial.tsx           | 10 ++---
 src/components/crapp/ui-bits.tsx              | 40 ++++++++++++++-----
 16 files changed, 149 insertions(+), 96 deletions(-)

diff --git a/src/components/crapp/Avatar.tsx b/src/components/crapp/Avatar.tsx
index 6e9f81d..1ab7039 100644
--- a/src/components/crapp/Avatar.tsx
+++ b/src/components/crapp/Avatar.tsx
@@ -24,9 +24,18 @@ export function Avatar({
     return (
       <img
         src={src}
-        alt={alt ?? `Foto di ${fallback}`}
+        // `fallback` è spesso il numero di maglia: "Foto di 12" non descrive
+        // niente. Senza un nome vero l'immagine è decorativa e il nome sta già
+        // scritto accanto, quindi alt vuoto.
+        alt={alt ?? ""}
+        // Le dimensioni reali le dà la classe; width/height servono solo a
+        // riservare il rapporto e non far saltare il layout al caricamento.
+        width={96}
+        height={96}
+        loading="lazy"
+        decoding="async"
         onError={() => setErrore(true)}
-        className={cn("shrink-0 rounded-2xl object-cover", className)}
+        className={cn("aspect-square shrink-0 rounded-2xl object-cover", className)}
       />
     );
   }
diff --git a/src/components/crapp/BadgeDrawer.tsx b/src/components/crapp/BadgeDrawer.tsx
index a6417b1..f923156 100644
--- a/src/components/crapp/BadgeDrawer.tsx
+++ b/src/components/crapp/BadgeDrawer.tsx
@@ -42,15 +42,13 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       {stato ? (
         <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
           <div className="flex items-center justify-between">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
               Stato attuale
             </p>
             {grado ? (
-              <span className={cn("text-[11px] font-bold uppercase", meta?.text)}>
-                {meta?.label}
-              </span>
+              <span className={cn("text-xs font-bold uppercase", meta?.text)}>{meta?.label}</span>
             ) : (
-              <span className="text-[11px] font-bold uppercase text-muted-foreground">
+              <span className="text-xs font-bold uppercase text-muted-foreground">
                 In progresso
               </span>
             )}
@@ -73,7 +71,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
       ) : null}
 
       <div>
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           Soglie
         </p>
         <div className="grid grid-cols-3 gap-2">
@@ -90,7 +88,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
               >
                 <p
                   className={cn(
-                    "text-[10px] font-bold uppercase",
+                    "text-xs font-bold uppercase",
                     raggiunto ? gm.text : "text-muted-foreground",
                   )}
                 >
@@ -104,7 +102,7 @@ function DettaglioBadge({ def, stato }: { def: BadgeDef; stato?: BadgeStato }) {
                 >
                   {def.soglie[g]}
                 </p>
-                <p className="text-[10px] text-muted-foreground">{def.unita}</p>
+                <p className="text-xs text-muted-foreground">{def.unita}</p>
               </div>
             );
           })}
diff --git a/src/components/crapp/BottomNav.tsx b/src/components/crapp/BottomNav.tsx
index 9db2121..8e7913a 100644
--- a/src/components/crapp/BottomNav.tsx
+++ b/src/components/crapp/BottomNav.tsx
@@ -2,7 +2,7 @@ import { Link } from "@tanstack/react-router";
 import { CalendarDays, Home, Trophy, User, Users } from "lucide-react";
 
 const items = [
-  { to: "/", label: "Home", icon: Home },
+  { to: "/", label: "Oggi", icon: Home },
   { to: "/calendario", label: "Calendario", icon: CalendarDays },
   { to: "/squadra", label: "Squadra", icon: Users },
   { to: "/classifica", label: "Classifica", icon: Trophy },
@@ -11,17 +11,33 @@ const items = [
 
 export function BottomNav() {
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur-md">
+    <nav
+      aria-label="Navigazione principale"
+      // `materiale` + `bordo-sfumato`: la barra è un vetro sotto cui il
+      // contenuto scorre, con una sfumatura al posto della riga netta.
+      className="materiale bordo-sfumato fixed inset-x-0 bottom-0 z-40"
+    >
       <div className="mx-auto grid max-w-md grid-cols-5 px-1 pb-[env(safe-area-inset-bottom)]">
         {items.map(({ to, label, icon: Icon }) => (
           <Link
             key={to}
             to={to}
             activeOptions={{ exact: to === "/" }}
-            className="group flex flex-col items-center gap-1 py-2.5 text-[10px] font-semibold text-muted-foreground transition-colors data-[status=active]:text-accent"
+            activeProps={{ "aria-current": "page" }}
+            // Lo stato attivo non è solo colore: cambia anche il peso del
+            // testo e compare la barretta sopra l'icona.
+            className="group relative flex min-h-11 flex-col items-center gap-1 py-2.5 text-xs font-semibold text-muted-foreground transition-colors data-[status=active]:font-extrabold data-[status=active]:text-accent"
           >
-            <Icon className="h-5 w-5" strokeWidth={2.2} />
-            {label}
+            {({ isActive }) => (
+              <>
+                <span
+                  aria-hidden="true"
+                  className="absolute inset-x-4 top-0 h-0.5 rounded-full bg-accent opacity-0 transition-opacity group-data-[status=active]:opacity-100"
+                />
+                <Icon className="h-5 w-5" strokeWidth={isActive ? 2.6 : 2.2} />
+                {label}
+              </>
+            )}
           </Link>
         ))}
       </div>
diff --git a/src/components/crapp/CelebrazioneBadge.tsx b/src/components/crapp/CelebrazioneBadge.tsx
index 92632e3..10907af 100644
--- a/src/components/crapp/CelebrazioneBadge.tsx
+++ b/src/components/crapp/CelebrazioneBadge.tsx
@@ -51,7 +51,7 @@ export function CelebrazioneBadge() {
             {notifica.emoji}
           </span>
           <div className="min-w-0 flex-1">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-accent">
+            <p className="text-xs font-bold uppercase tracking-wide text-accent">
               {notifica.tono === "segreto" ? "Badge segreto sbloccato" : "Traguardo raggiunto"}
             </p>
             <p className="mt-0.5 font-display text-2xl leading-none">{notifica.titolo}</p>
@@ -61,7 +61,7 @@ export function CelebrazioneBadge() {
             type="button"
             onClick={chiudi}
             aria-label="Chiudi"
-            className="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
+            className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-secondary text-muted-foreground"
           >
             <X className="h-4 w-4" />
           </button>
diff --git a/src/components/crapp/CollezioneBadge.tsx b/src/components/crapp/CollezioneBadge.tsx
index 27ab58d..32bbdf1 100644
--- a/src/components/crapp/CollezioneBadge.tsx
+++ b/src/components/crapp/CollezioneBadge.tsx
@@ -45,21 +45,21 @@ function CardBadge({ b, opaco, indice = 0 }: { b: BadgeStato; opaco?: boolean; i
       <div className="flex items-center justify-between">
         <Icon className={cn("h-6 w-6", meta ? meta.text : "text-muted-foreground/50")} />
         {meta ? (
-          <span className={cn("text-[10px] font-bold uppercase", meta.text)}>{meta.label}</span>
+          <span className={cn("text-xs font-bold uppercase", meta.text)}>{meta.label}</span>
         ) : null}
       </div>
       <p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
-      <p className="text-[11px] text-muted-foreground">
+      <p className="text-xs text-muted-foreground">
         {b.valore} {b.def.unita}
       </p>
       {b.prossimaSoglia ? (
         <>
           <Barra percentuale={b.progresso} altezza="h-1.5" trackClassName="mt-2" />
-          <p className="mt-1 text-[10px] font-semibold text-accent">{mancanoPer(b)}</p>
-          <p className="text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+          <p className="mt-1 text-xs font-semibold text-accent">{mancanoPer(b)}</p>
+          <p className="text-xs text-muted-foreground">{microcopyBadge(b)}</p>
         </>
       ) : (
-        <p className="mt-2 text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+        <p className="mt-2 text-xs text-muted-foreground">{microcopyBadge(b)}</p>
       )}
     </Reveal>
   );
@@ -96,9 +96,7 @@ function SocialDrawer({
             </div>
           </div>
           <div className="rounded-2xl bg-card p-4 shadow-card ring-1 ring-border">
-            <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
-              Vinto
-            </p>
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">Vinto</p>
             <p className="mt-1 font-display text-3xl leading-none">
               {conteggio}{" "}
               <span className="text-lg text-muted-foreground">
@@ -141,7 +139,7 @@ export function CollezioneBadge({
       <div className="rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
         <div className="flex items-end justify-between gap-3">
           <div className="min-w-0">
-            <p className="text-[11px] font-semibold uppercase tracking-wide text-primary-foreground/60">
+            <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
               Collezione badge
             </p>
             <p className="font-display text-4xl leading-none">
@@ -158,7 +156,7 @@ export function CollezioneBadge({
 
       {vicino ? (
         <div className="rounded-3xl bg-card p-4 shadow-card ring-1 ring-accent/30">
-          <p className="text-[11px] font-bold uppercase tracking-wide text-accent">
+          <p className="text-xs font-bold uppercase tracking-wide text-accent">
             Prossimo traguardo
           </p>
           <p className="mt-1 text-sm font-bold leading-tight">{vicino.def.nome}</p>
@@ -171,7 +169,7 @@ export function CollezioneBadge({
 
       {c.sbloccati.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Sbloccati ({c.sbloccati.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -186,7 +184,7 @@ export function CollezioneBadge({
 
       {c.inProgresso.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             In progresso ({c.inProgresso.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -201,7 +199,7 @@ export function CollezioneBadge({
 
       {socialVinti.length > 0 ? (
         <div>
-          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Votati dai compagni
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -210,7 +208,7 @@ export function CollezioneBadge({
                 <div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-accent/25">
                   <p className="text-lg leading-none">{cat.emoji}</p>
                   <p className="mt-1 text-sm font-bold leading-tight">{cat.nome}</p>
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
                   </p>
                 </div>
@@ -221,7 +219,7 @@ export function CollezioneBadge({
       ) : null}
 
       <div>
-        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="mb-2 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           Badge segreti
         </p>
         <div className="grid grid-cols-2 gap-2">
@@ -232,7 +230,7 @@ export function CollezioneBadge({
                 <div className="rounded-2xl bg-card p-3 shadow-card ring-1 ring-oro/40">
                   <Icon className="h-6 w-6 text-oro" />
                   <p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     {b.def.celebrazione ?? "Badge segreto sbloccato."}
                   </p>
                 </div>
@@ -246,7 +244,7 @@ export function CollezioneBadge({
             >
               <Lucchetto className="h-6 w-6 text-muted-foreground/50" />
               <p className="mt-1.5 text-sm font-bold leading-tight text-muted-foreground">???</p>
-              <p className="text-[11px] text-muted-foreground/70">Badge segreto da scoprire</p>
+              <p className="text-xs text-muted-foreground/70">Badge segreto da scoprire</p>
             </div>
           ))}
         </div>
diff --git a/src/components/crapp/EventoCard.tsx b/src/components/crapp/EventoCard.tsx
index 51fabc4..f485a57 100644
--- a/src/components/crapp/EventoCard.tsx
+++ b/src/components/crapp/EventoCard.tsx
@@ -1,6 +1,7 @@
 import { MapPin, Clock, Users, Cake, ArrowRight } from "lucide-react";
 import { Link } from "@tanstack/react-router";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { formatData, statoMeta, type Stato } from "@/lib/crapp-data";
 import type { Evento } from "@/lib/eventi";
 import { Barra } from "@/components/motion/Barra";
@@ -53,7 +54,7 @@ export function EventoCard({
 
   if (isCompleanno) {
     return (
-      <article className="premi flex items-center gap-3 rounded-3xl bg-card p-4 shadow-card">
+      <Card as="article" className="flex items-center gap-3">
         <div className="grid h-11 w-11 shrink-0 place-items-center rounded-2xl bg-success/15 text-success">
           <Cake className="h-5 w-5" />
         </div>
@@ -63,21 +64,21 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
-      </article>
+      </Card>
     );
   }
 
   return (
-    <article className="premi rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <span
             className={cn(
-              "inline-block rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wide",
+              "inline-block rounded-full px-2.5 py-0.5 text-xs font-bold uppercase tracking-wide",
               tipo.className,
             )}
           >
@@ -87,7 +88,7 @@ export function EventoCard({
         </div>
         <div className="shrink-0 rounded-2xl bg-secondary px-3 py-2 text-center">
           <p className="font-display text-xl leading-none">{evento.data.slice(8, 10)}</p>
-          <p className="text-[10px] font-semibold uppercase text-muted-foreground">
+          <p className="text-xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -98,7 +99,7 @@ export function EventoCard({
           <Link
             to={linkTo.to}
             params={linkTo.params}
-            className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-[10px] font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
+            className="inline-flex min-h-11 items-center gap-1 rounded-full bg-primary px-4 text-xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
           >
             {linkTo.label} <ArrowRight className="h-3 w-3" />
           </Link>
@@ -121,7 +122,7 @@ export function EventoCard({
       <Barra percentuale={perc} altezza="h-1.5" trackClassName="mt-3" />
 
       {io ? (
-        <div className="mt-4 flex flex-wrap gap-1.5">
+        <div className="mt-4 flex flex-wrap gap-2">
           {stati.map((s) => {
             const meta = statoMeta[s];
             const attivo = stato === s;
@@ -137,8 +138,11 @@ export function EventoCard({
                     stato: attivo ? null : s,
                   })
                 }
+                aria-pressed={attivo}
                 className={cn(
-                  "rounded-full border border-border px-2.5 py-1.5 text-[11px] font-semibold transition-all active:scale-95",
+                  // min-h-11: sono i controlli più toccati dell'app, sotto i
+                  // 44px si sbaglia bersaglio.
+                  "min-h-11 rounded-full border border-border px-3 text-xs font-semibold transition-all active:scale-95",
                   attivo
                     ? cn(meta.className, "border-transparent shadow-card")
                     : "bg-background text-muted-foreground",
@@ -150,6 +154,6 @@ export function EventoCard({
           })}
         </div>
       ) : null}
-    </article>
+    </Card>
   );
 }
diff --git a/src/components/crapp/Pagelle.tsx b/src/components/crapp/Pagelle.tsx
index cb23062..f36c266 100644
--- a/src/components/crapp/Pagelle.tsx
+++ b/src/components/crapp/Pagelle.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { ClipboardCheck, Lock } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import type { Giocatore } from "@/lib/crapp-data";
 import { useGiocatoreCorrente } from "@/lib/user-store";
@@ -41,21 +42,23 @@ export function Pagelle({
   }
 
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center justify-between gap-2">
-        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           <ClipboardCheck className="h-3.5 w-3.5" /> Pagelle anonime
         </p>
-        <span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
+        <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
           {chiuse ? "Votazioni chiuse" : `${fatti}/${daVotare.length} votati`}
         </span>
       </div>
-      <p className="mt-1 text-[11px] text-muted-foreground">
+      <p className="mt-1 text-xs text-muted-foreground">
         Dai un voto da 1 a 10 ai compagni: nessuno vedrà chi ha votato cosa, solo la media.
       </p>
 
       {isPending ? (
-        <p className="mt-3 text-xs text-muted-foreground">Carico le pagelle…</p>
+        <p aria-busy="true" className="mt-3 text-xs text-muted-foreground">
+          Carico le pagelle…
+        </p>
       ) : (
         <div className="mt-3 space-y-1.5">
           {convocati.map((g) => {
@@ -69,12 +72,12 @@ export function Pagelle({
                   <Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-xs" />
                   <span className="min-w-0 flex-1">
                     <span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
-                    <span className="text-[11px] text-muted-foreground">
+                    <span className="text-xs text-muted-foreground">
                       {media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"}
                     </span>
                   </span>
                   {sonoIo ? (
-                    <span className="shrink-0 text-[10px] font-semibold uppercase text-muted-foreground">
+                    <span className="shrink-0 text-xs font-semibold uppercase text-muted-foreground">
                       Sei tu
                     </span>
                   ) : chiuse ? (
@@ -85,7 +88,7 @@ export function Pagelle({
                       disabled={!io || vota.isPending}
                       onClick={() => setApertoPer(aperto ? null : g.id)}
                       className={cn(
-                        "shrink-0 rounded-full px-3 py-1 text-[10px] font-bold uppercase transition-colors disabled:opacity-50",
+                        "shrink-0 rounded-full px-3 py-1 text-xs font-bold uppercase transition-colors disabled:opacity-50",
                         mio !== undefined
                           ? "bg-accent text-accent-foreground"
                           : "bg-card text-foreground",
@@ -103,7 +106,7 @@ export function Pagelle({
                         type="button"
                         onClick={() => invia(g.id, v)}
                         className={cn(
-                          "rounded-lg py-1.5 text-[11px] font-bold tabular-nums transition-transform active:scale-90",
+                          "rounded-lg py-1.5 text-xs font-bold tabular-nums transition-transform active:scale-90",
                           mio === v
                             ? "bg-accent text-accent-foreground"
                             : "bg-card text-foreground",
@@ -119,6 +122,6 @@ export function Pagelle({
           })}
         </div>
       )}
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/crapp/ProfiloAmministrativo.tsx b/src/components/crapp/ProfiloAmministrativo.tsx
index f4f97c0..3ef62a7 100644
--- a/src/components/crapp/ProfiloAmministrativo.tsx
+++ b/src/components/crapp/ProfiloAmministrativo.tsx
@@ -27,7 +27,7 @@ const classiInput = "w-full rounded-xl border border-border bg-background px-3 p
 function Campo({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <label className="block">
-      <span className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+      <span className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
       <span className="mt-1 block">{children}</span>
diff --git a/src/components/crapp/RosaPresenze.tsx b/src/components/crapp/RosaPresenze.tsx
index 8cafd8d..5123a52 100644
--- a/src/components/crapp/RosaPresenze.tsx
+++ b/src/components/crapp/RosaPresenze.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { BellRing, HelpCircle, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { Avatar } from "@/components/crapp/Avatar";
 import { Barra } from "@/components/motion/Barra";
 import { statoMeta, type Giocatore, type Stato } from "@/lib/crapp-data";
@@ -49,7 +50,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
 
   return (
     <div className="space-y-3">
-      <div className="rounded-3xl bg-card p-4 shadow-card">
+      <Card>
         <div className="flex items-baseline justify-between">
           <p className="text-sm font-bold">
             Hanno risposto {risposteN}/{rosa.length}
@@ -65,7 +66,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
               <span
                 key={s}
                 className={cn(
-                  "rounded-full px-2.5 py-1 text-[11px] font-bold",
+                  "rounded-full px-2.5 py-1 text-xs font-bold",
                   n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
                 )}
               >
@@ -73,14 +74,14 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
               </span>
             );
           })}
-          <span className="rounded-full bg-secondary px-2.5 py-1 text-[11px] font-bold text-muted-foreground">
+          <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold text-muted-foreground">
             ❔ {mancanti.length} da rispondere
           </span>
         </div>
 
         {io ? (
           <div className="mt-4 border-t border-border pt-3">
-            <p className="text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+            <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
               La tua risposta
             </p>
             <div className="mt-2 flex flex-wrap gap-1.5">
@@ -95,7 +96,7 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
                       salva.mutate({ eventoId, giocatoreId: io.id, stato: attivo ? null : s })
                     }
                     className={cn(
-                      "rounded-full border border-border px-2.5 py-1.5 text-[11px] font-semibold transition-all active:scale-95",
+                      "rounded-full border border-border px-2.5 py-1.5 text-xs font-semibold transition-all active:scale-95",
                       attivo
                         ? cn(statoMeta[s].className, "border-transparent shadow-card")
                         : "bg-background text-muted-foreground",
@@ -124,10 +125,12 @@ export function RosaPresenze({ eventoId }: { eventoId: string }) {
             Sollecita {daSollecitare} giocatori
           </button>
         ) : null}
-      </div>
+      </Card>
 
       {isPending ? (
-        <p className="text-center text-xs text-muted-foreground">Carico le risposte…</p>
+        <p aria-busy="true" className="text-center text-xs text-muted-foreground">
+          Carico le risposte…
+        </p>
       ) : null}
 
       {ordine.map((s) => {
diff --git a/src/components/crapp/ScoutEntry.tsx b/src/components/crapp/ScoutEntry.tsx
index d9fccb7..8becdd1 100644
--- a/src/components/crapp/ScoutEntry.tsx
+++ b/src/components/crapp/ScoutEntry.tsx
@@ -39,7 +39,7 @@ export function ScoutEntry({ variante = "grande" }: { variante?: "grande" | "com
       {occupato ? <Lock className="h-5 w-5 shrink-0" /> : <Radio className="h-5 w-5 shrink-0" />}
       <span className="min-w-0 flex-1">
         <span className="block font-display text-lg uppercase leading-none">{titolo}</span>
-        <span className="block text-[11px] opacity-80">{sottotitolo}</span>
+        <span className="block text-xs opacity-80">{sottotitolo}</span>
       </span>
       {disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
     </>
diff --git a/src/components/crapp/SerieCard.tsx b/src/components/crapp/SerieCard.tsx
index 4e1bcfd..474e841 100644
--- a/src/components/crapp/SerieCard.tsx
+++ b/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>
   );
 }
diff --git a/src/components/crapp/SondaggioCacche.tsx b/src/components/crapp/SondaggioCacche.tsx
index 46a78b0..8cd4ca5 100644
--- a/src/components/crapp/SondaggioCacche.tsx
+++ b/src/components/crapp/SondaggioCacche.tsx
@@ -1,5 +1,6 @@
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { Card } from "@/components/crapp/ui-bits";
 import { nomeCompleto, useGiocatoriSquadra } from "@/lib/giocatori-squadra";
 import { useGiocatoreCorrente } from "@/lib/user-store";
 import { mediaPartita, useCacche, useSalvaCacche } from "@/lib/cacche";
@@ -35,16 +36,16 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
   }
 
   return (
-    <div className="rounded-3xl bg-card p-4 shadow-card">
+    <Card>
       <div className="flex items-center justify-between gap-2">
-        <p className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="text-xs font-bold uppercase tracking-wide text-muted-foreground">
           💩 Sondaggio pre-partita
         </p>
-        <span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
+        <span className="rounded-full bg-secondary px-2.5 py-1 text-xs font-bold uppercase text-muted-foreground">
           {dellaPartita.length} risposte
         </span>
       </div>
-      <p className="mt-1 text-[11px] text-muted-foreground">
+      <p className="mt-1 text-xs text-muted-foreground">
         Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
       </p>
 
@@ -67,7 +68,7 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
         ))}
       </div>
 
-      <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
         <span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
           Media squadra {media}
         </span>
@@ -80,6 +81,6 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
           </span>
         ))}
       </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/components/crapp/TurnoPalloni.tsx b/src/components/crapp/TurnoPalloni.tsx
index 8428344..ab73c7d 100644
--- a/src/components/crapp/TurnoPalloni.tsx
+++ b/src/components/crapp/TurnoPalloni.tsx
@@ -41,7 +41,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
           <CircleDot className="h-4 w-4" />
         </span>
         <span className="min-w-0 flex-1">
-          <span className="block text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
+          <span className="block text-xs font-bold uppercase tracking-wide text-muted-foreground">
             Palloni
           </span>
           <span className="flex items-center gap-1.5 text-sm font-bold leading-tight">
@@ -50,7 +50,7 @@ export function TurnoPalloni({ eventoId }: { eventoId: string }) {
             ) : null}
             <span className="truncate">{giocatore ? nomeCompleto(giocatore) : "Da assegnare"}</span>
             {proposto && giocatore ? (
-              <span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-[9px] font-bold uppercase text-muted-foreground">
+              <span className="shrink-0 rounded-full bg-card px-1.5 py-0.5 text-xs font-bold uppercase text-muted-foreground">
                 proposto
               </span>
             ) : null}
diff --git a/src/components/crapp/VotazioneMvp.tsx b/src/components/crapp/VotazioneMvp.tsx
index d678964..ea8b0de 100644
--- a/src/components/crapp/VotazioneMvp.tsx
+++ b/src/components/crapp/VotazioneMvp.tsx
@@ -41,14 +41,14 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
   return (
     <div className="mt-3 rounded-2xl bg-secondary/60 p-3">
       <div className="flex items-center justify-between gap-2">
-        <p className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+        <p className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
           <Vote className="h-3.5 w-3.5" /> Voto MVP · {totale} {totale === 1 ? "voto" : "voti"}
         </p>
         <button
           type="button"
           onClick={() => setAperto((v) => !v)}
           disabled={!io}
-          className="rounded-full bg-accent px-3 py-1 text-[10px] font-bold uppercase text-accent-foreground disabled:opacity-50"
+          className="rounded-full bg-accent px-3 py-1 text-xs font-bold uppercase text-accent-foreground disabled:opacity-50"
         >
           {mio ? "Cambia voto" : "Vota"}
         </button>
@@ -66,7 +66,7 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
         )}
       </p>
       {mio ? (
-        <p className="mt-1 text-[11px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
+        <p className="mt-1 text-xs text-muted-foreground">Hai votato {mio.votato_nome}</p>
       ) : null}
 
       {aperto ? (
@@ -91,7 +91,7 @@ export function VotazioneMvp({ matchId }: { matchId: string }) {
       ) : conteggio.length > 0 ? (
         <div className="mt-2 flex flex-wrap gap-1.5">
           {conteggio.map((c) => (
-            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-[11px] font-semibold">
+            <span key={c.id} className="rounded-lg bg-card px-2 py-1 text-xs font-semibold">
               {c.nome} · {c.voti}
             </span>
           ))}
diff --git a/src/components/crapp/VotoSocial.tsx b/src/components/crapp/VotoSocial.tsx
index 881b248..1431dee 100644
--- a/src/components/crapp/VotoSocial.tsx
+++ b/src/components/crapp/VotoSocial.tsx
@@ -50,7 +50,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
 
   return (
     <div className="space-y-2">
-      <div className="rounded-2xl bg-secondary/60 px-3 py-2 text-[11px] font-semibold text-muted-foreground">
+      <div className="rounded-2xl bg-secondary/60 px-3 py-2 text-xs font-semibold text-muted-foreground">
         <span className="inline-flex items-center gap-1.5">
           <Sparkles className="h-3.5 w-3.5 text-accent" />
           Hai votato {fatti}/{categorieSocial.length} categorie · un solo voto per categoria
@@ -79,13 +79,13 @@ export function VotoSocial({ matchId }: { matchId: string }) {
               </span>
               <span className="min-w-0 flex-1">
                 <span className="block truncate text-sm font-bold leading-tight">{cat.nome}</span>
-                <span className="block truncate text-[11px] text-muted-foreground">
+                <span className="block truncate text-xs text-muted-foreground">
                   {mio ? `Hai votato ${mio.votato_nome}` : cat.descrizione}
                 </span>
               </span>
               <span
                 className={cn(
-                  "shrink-0 rounded-full px-2.5 py-1 text-[10px] font-bold uppercase",
+                  "shrink-0 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
                   mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
                 )}
               >
@@ -117,7 +117,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
             ) : (
               <div className="border-t border-border px-3 py-2">
                 {totale === 0 ? (
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Nessun voto ancora: apri e scegli un compagno.
                   </p>
                 ) : vincitore ? (
@@ -127,7 +127,7 @@ export function VotoSocial({ matchId }: { matchId: string }) {
                     {vincitore.nome} · {vincitore.voti} {vincitore.voti === 1 ? "voto" : "voti"}
                   </p>
                 ) : (
-                  <p className="text-[11px] text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     Parità con {totale} voti: servono altri voti per assegnare il badge.
                   </p>
                 )}
diff --git a/src/components/crapp/ui-bits.tsx b/src/components/crapp/ui-bits.tsx
index bc884a4..abbad88 100644
--- a/src/components/crapp/ui-bits.tsx
+++ b/src/components/crapp/ui-bits.tsx
@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useId, useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { statoMeta, type Stato } from "@/lib/crapp-data";
@@ -10,19 +10,37 @@ export function TeamLogo({ className }: { className?: string }) {
     <img
       src="/icon-192.png"
       alt="CRAP Volley"
+      width={192}
+      height={192}
       className={cn("shrink-0 rounded-2xl object-cover shadow-pop", className)}
     />
   );
 }
 
+/**
+ * Superficie standard dell'app: era ripetuta a mano una ventina di volte come
+ * `rounded-3xl bg-card p-4 shadow-card`, quindi cambiare raggio od ombra
+ * voleva dire toccare venti file.
+ *
+ * Gerarchia dei raggi: contenitore `3xl` → elemento interno `2xl` →
+ * controllo `full`.
+ */
+export function Card({
+  className,
+  as: Tag = "div",
+  ...props
+}: ComponentPropsWithoutRef<"div"> & { as?: "div" | "article" | "section" }) {
+  return <Tag className={cn("premi rounded-3xl bg-card p-4 shadow-card", className)} {...props} />;
+}
+
 export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitolo?: string }) {
   return (
     <header className="bg-hero px-5 pb-8 pt-7 text-primary-foreground">
       <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
         <div className="min-w-0">
-          <h1 className="truncate font-display text-3xl uppercase">{titolo}</h1>
+          <h1 className="truncate font-display-lg text-3xl uppercase">{titolo}</h1>
           {sottotitolo ? (
-            <p className="mt-1 truncate text-sm text-primary-foreground/70">{sottotitolo}</p>
+            <p className="mt-1 truncate text-sm text-primary-foreground/80">{sottotitolo}</p>
           ) : null}
         </div>
         <TeamLogo className="h-11 w-11" />
@@ -45,7 +63,7 @@ export function Section({
   return (
     <Reveal as="section" indice={indice} className="px-5 py-4">
       <div className="mb-3 flex items-center justify-between gap-3">
-        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+        <h2 className="font-display-sm text-lg uppercase">{titolo}</h2>
         {azione}
       </div>
       {children}
@@ -70,15 +88,17 @@ export function SezioneTendina({
   indice?: number;
 }) {
   const [aperta, setAperta] = useState(defaultAperta);
+  const id = useId();
   return (
     <Reveal as="section" indice={indice} className="px-5 py-4">
       <button
         type="button"
         onClick={() => setAperta((v) => !v)}
-        className="mb-3 flex w-full items-center justify-between gap-3 text-left active:scale-[0.99]"
+        className="mb-3 flex min-h-11 w-full items-center justify-between gap-3 text-left active:scale-[0.99]"
         aria-expanded={aperta}
+        aria-controls={id}
       >
-        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+        <h2 className="font-display-sm text-lg uppercase">{titolo}</h2>
         <span className="flex shrink-0 items-center gap-2">
           {azione}
           <ChevronDown
@@ -90,7 +110,7 @@ export function SezioneTendina({
         </span>
       </button>
       {anteprima}
-      {aperta ? children : null}
+      <div id={id}>{aperta ? children : null}</div>
     </Reveal>
   );
 }
@@ -100,7 +120,7 @@ export function StatoBadge({ stato, className }: { stato: Stato; className?: str
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase",
+        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold uppercase",
         meta.className,
         className,
       )}
@@ -124,10 +144,10 @@ export function StatTile({
       <p className="font-display text-2xl leading-none">
         {typeof valore === "number" ? <Numero valore={valore} /> : valore}
       </p>
-      <p className="mt-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+      <p className="mt-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
         {label}
       </p>
-      {hint ? <p className="mt-0.5 text-[11px] text-accent">{hint}</p> : null}
+      {hint ? <p className="mt-0.5 text-xs text-accent">{hint}</p> : null}
     </div>
   );
 }