Rifinisce l'interfaccia su safe area, materiali, tipografia e accessibilità.

Nessun cambio di funzionalità: solo resa, accessibilità e correzioni al layout
su iPhone.

- Aggiunge `viewport-fit=cover`: senza, su iOS `env(safe-area-inset-*)` valeva 0
  e il margine per la barra gesture già presente nella bottom nav non aveva
  effetto. Aggiunge il margine superiore su hero, PageHeader e header dello
  scout, che in modalità standalone finivano sotto il notch.
- Attiva il tema scuro sulla preferenza di sistema e ne riscrive i valori:
  l'accento resta il rosso del brand (prima diventava grigio-blu) e i token
  semantici che mancavano ora ci sono. `theme-color` ha una tinta per tema.
- Sposta il feedback dal rilascio alla pressione su Button, bottom nav e comandi
  principali; aggiunge l'anello di focus da tastiera in `@layer base`, che
  mancava su tutti i bottoni scritti a mano fuori da components/ui/.
- Rende la bottom nav una superficie traslucida con sfumatura di scorrimento al
  posto della riga netta, alleggerisce il velo dei drawer e sostituisce l'alone
  rosso delle ombre con ombre neutre.
- Introduce una scala tipografica in rem con crenatura e interlinea per taglia,
  al posto dei 109 `text-[Npx]` fissi che non scalavano con l'impostazione di
  testo del sistema.
- Porta a 44px le aree di tocco dei comandi piccoli, mostra uno scheletro di
  pagina al posto della schermata bianca in home e profilo, conserva le
  dissolvenze con movimento ridotto e aggiunge il supporto a
  `prefers-reduced-transparency` e `prefers-contrast`.
- Anima l'apertura delle sezioni a tendina con Radix Collapsible, già fra le
  dipendenze, al posto di un montaggio secco.

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

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-2xs 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-2xs font-bold uppercase", meta?.text)}>{meta?.label}</span>
             ) : (
-              <span className="text-[11px] font-bold uppercase text-muted-foreground">
+              <span className="text-2xs 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-2xs 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-3xs 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-3xs text-muted-foreground">{def.unita}</p>
               </div>
             );
           })}

src/components/crapp/BottomNav.tsx

@@ -11,14 +11,14 @@ 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 className="materiale bordo-scroll-basso fixed inset-x-0 bottom-0 z-40 border-t">
       <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"
+            className="group flex flex-col items-center gap-1 py-2.5 text-3xs font-semibold text-muted-foreground transition-[color,transform] duration-100 ease-out active:scale-[0.92] data-[status=active]:text-accent"
           >
             <Icon className="h-5 w-5" strokeWidth={2.2} />
             {label}

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-2xs 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>

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-3xs 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-2xs 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-3xs font-semibold text-accent">{mancanoPer(b)}</p>
+          <p className="text-3xs text-muted-foreground">{microcopyBadge(b)}</p>
         </>
       ) : (
-        <p className="mt-2 text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+        <p className="mt-2 text-3xs text-muted-foreground">{microcopyBadge(b)}</p>
       )}
     </Reveal>
   );
@@ -96,7 +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">
+            <p className="text-2xs font-bold uppercase tracking-wide text-muted-foreground">
               Vinto
             </p>
             <p className="mt-1 font-display text-3xl leading-none">
@@ -141,7 +141,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-2xs font-semibold uppercase tracking-wide text-primary-foreground/60">
               Collezione badge
             </p>
             <p className="font-display text-4xl leading-none">
@@ -158,7 +158,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-2xs 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 +171,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-2xs font-bold uppercase tracking-wide text-muted-foreground">
             Sbloccati ({c.sbloccati.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -186,7 +186,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-2xs font-bold uppercase tracking-wide text-muted-foreground">
             In progresso ({c.inProgresso.length})
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -201,7 +201,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-2xs font-bold uppercase tracking-wide text-muted-foreground">
             Votati dai compagni
           </p>
           <div className="grid grid-cols-2 gap-2">
@@ -210,7 +210,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-2xs text-muted-foreground">
                     Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
                   </p>
                 </div>
@@ -221,7 +221,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-2xs font-bold uppercase tracking-wide text-muted-foreground">
           Badge segreti
         </p>
         <div className="grid grid-cols-2 gap-2">
@@ -232,7 +232,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-2xs text-muted-foreground">
                     {b.def.celebrazione ?? "Badge segreto sbloccato."}
                   </p>
                 </div>
@@ -246,7 +246,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-2xs text-muted-foreground/70">Badge segreto da scoprire</p>
             </div>
           ))}
         </div>

src/components/crapp/EventoCard.tsx

@@ -63,7 +63,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-3xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -77,7 +77,7 @@ export function EventoCard({
         <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-3xs font-bold uppercase tracking-wide",
               tipo.className,
             )}
           >
@@ -87,7 +87,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-3xs font-semibold uppercase text-muted-foreground">
             {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
           </p>
         </div>
@@ -98,9 +98,9 @@ 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 items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-3xs font-bold uppercase tracking-wide text-primary-foreground transition-transform active:scale-95"
           >
-            {linkTo.label} <ArrowRight className="h-3 w-3" />
+            {linkTo.label} <ArrowRight className="h-3.5 w-3.5" />
           </Link>
         </div>
       )}
@@ -138,7 +138,7 @@ export function EventoCard({
                   })
                 }
                 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-2xs font-semibold transition-all active:scale-95",
                   attivo
                     ? cn(meta.className, "border-transparent shadow-card")
                     : "bg-background text-muted-foreground",

src/components/crapp/Pagelle.tsx

@@ -43,14 +43,14 @@ export function Pagelle({
   return (
     <div className="rounded-3xl bg-card p-4 shadow-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-2xs 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-3xs 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-2xs text-muted-foreground">
         Dai un voto da 1 a 10 ai compagni: nessuno vedrà chi ha votato cosa, solo la media.
       </p>
 
@@ -69,12 +69,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-2xs 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-3xs font-semibold uppercase text-muted-foreground">
                       Sei tu
                     </span>
                   ) : chiuse ? (
@@ -85,7 +85,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-3xs font-bold uppercase transition-colors disabled:opacity-50",
                         mio !== undefined
                           ? "bg-accent text-accent-foreground"
                           : "bg-card text-foreground",
@@ -103,7 +103,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-2xs font-bold tabular-nums transition-transform active:scale-90",
                           mio === v
                             ? "bg-accent text-accent-foreground"
                             : "bg-card text-foreground",

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-3xs font-bold uppercase tracking-wide text-muted-foreground">
         {label}
       </span>
       <span className="mt-1 block">{children}</span>

src/components/crapp/RosaPresenze.tsx

@@ -65,7 +65,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-2xs font-bold",
                   n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
                 )}
               >
@@ -73,14 +73,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-2xs 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-3xs font-bold uppercase tracking-wide text-muted-foreground">
               La tua risposta
             </p>
             <div className="mt-2 flex flex-wrap gap-1.5">
@@ -95,7 +95,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-2xs font-semibold transition-all active:scale-95",
                       attivo
                         ? cn(statoMeta[s].className, "border-transparent shadow-card")
                         : "bg-background text-muted-foreground",

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-2xs opacity-80">{sottotitolo}</span>
       </span>
       {disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
     </>

src/components/crapp/SerieCard.tsx

@@ -28,7 +28,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-2xs 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 +38,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-2xs text-muted-foreground">
               {s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
               {s.messaggio}
             </p>
@@ -63,14 +63,14 @@ 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-2xs 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-3xs font-semibold uppercase text-muted-foreground">
               {s.def.label}
             </p>
           </div>

src/components/crapp/SondaggioCacche.tsx

@@ -37,14 +37,14 @@ export function SondaggioCacche({ eventoId }: { eventoId: string }) {
   return (
     <div className="rounded-3xl bg-card p-4 shadow-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-2xs 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-3xs 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-2xs text-muted-foreground">
         Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
       </p>
 
@@ -67,7 +67,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-2xs">
         <span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
           Media squadra {media}
         </span>

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-3xs 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-3xs font-bold uppercase text-muted-foreground">
                 proposto
               </span>
             ) : null}

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-2xs 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="area-tocco rounded-full bg-accent px-3 py-1 text-3xs 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-2xs 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-2xs font-semibold">
               {c.nome} · {c.voti}
             </span>
           ))}

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-2xs 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,17 +79,17 @@ 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-2xs 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-3xs font-bold uppercase",
                   mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
                 )}
               >
-                {mio ? <Check className="h-3 w-3" /> : "Vota"}
+                {mio ? <Check className="h-3.5 w-3.5" /> : "Vota"}
               </span>
             </button>
 
@@ -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-2xs 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-2xs text-muted-foreground">
                     Parità con {totale} voti: servono altri voti per assegnare il badge.
                   </p>
                 )}

src/components/crapp/ui-bits.tsx

@@ -2,6 +2,8 @@ import { useState, type ReactNode } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { statoMeta, type Stato } from "@/lib/crapp-data";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Skeleton } from "@/components/ui/skeleton";
 import { Reveal } from "@/components/motion/Reveal";
 import { Numero } from "@/components/motion/Numero";
 
@@ -17,7 +19,7 @@ export function TeamLogo({ className }: { className?: string }) {
 
 export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitolo?: string }) {
   return (
-    <header className="bg-hero px-5 pb-8 pt-7 text-primary-foreground">
+    <header className="bg-hero px-5 pb-8 pt-[calc(1.75rem+env(safe-area-inset-top))] 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>
@@ -31,6 +33,33 @@ export function PageHeader({ titolo, sottotitolo }: { titolo: string; sottotitol
   );
 }
 
+/**
+ * Scheletro di pagina mostrato mentre i dati arrivano. Riserva lo spazio della
+ * struttura reale: meglio di `return null`, che lascia la schermata bianca e poi
+ * fa saltare il layout quando il contenuto compare.
+ */
+export function ScheletroPagina() {
+  return (
+    <div aria-busy="true" aria-live="polite">
+      <div className="bg-hero px-5 pb-10 pt-[calc(1.75rem+env(safe-area-inset-top))]">
+        <Skeleton className="h-3 w-24 bg-primary-foreground/20" />
+        <Skeleton className="mt-2 h-8 w-40 bg-primary-foreground/20" />
+        <div className="mt-6 grid grid-cols-3 gap-2">
+          {[0, 1, 2].map((i) => (
+            <Skeleton key={i} className="h-16 rounded-2xl bg-primary-foreground/10" />
+          ))}
+        </div>
+      </div>
+      <div className="space-y-3 px-5 py-4">
+        {[0, 1, 2].map((i) => (
+          <Skeleton key={i} className="h-24 rounded-3xl" />
+        ))}
+      </div>
+      <span className="sr-only">Caricamento in corso</span>
+    </div>
+  );
+}
+
 export function Section({
   titolo,
   azione,
@@ -72,25 +101,24 @@ export function SezioneTendina({
   const [aperta, setAperta] = useState(defaultAperta);
   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]"
-        aria-expanded={aperta}
-      >
-        <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
-        <span className="flex shrink-0 items-center gap-2">
-          {azione}
-          <ChevronDown
-            className={cn(
-              "h-4 w-4 text-muted-foreground transition-transform",
-              aperta && "rotate-180",
-            )}
-          />
-        </span>
-      </button>
-      {anteprima}
-      {aperta ? children : null}
+      {/* Radix Collapsible (gia' fra le dipendenze) al posto di un `aperta ? ... : null`:
+          l'altezza viene animata, cosi' l'apertura non e' uno scatto secco. */}
+      <Collapsible open={aperta} onOpenChange={setAperta}>
+        <CollapsibleTrigger className="mb-3 flex w-full items-center justify-between gap-3 text-left transition-transform duration-100 ease-out active:scale-[0.99]">
+          <h2 className="font-display text-lg uppercase tracking-wide">{titolo}</h2>
+          <span className="flex shrink-0 items-center gap-2">
+            {azione}
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200 ease-out",
+                aperta && "rotate-180",
+              )}
+            />
+          </span>
+        </CollapsibleTrigger>
+        {anteprima}
+        <CollapsibleContent className="anim-tendina">{children}</CollapsibleContent>
+      </Collapsible>
     </Reveal>
   );
 }
@@ -100,7 +128,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-2xs font-bold uppercase",
         meta.className,
         className,
       )}
@@ -124,10 +152,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-2xs 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-2xs text-accent">{hint}</p> : null}
     </div>
   );
 }

src/components/ui/button.tsx

@@ -5,7 +5,9 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  // Il feedback vive sulla pressione, non sul rilascio: su touch `hover` non
+  // esiste e senza `active:` il bottone sembra morto finche' non alzi il dito.
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-[transform,background-color,color,border-color,box-shadow] duration-100 ease-out active:scale-[0.97] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

src/components/ui/drawer.tsx

@@ -23,7 +23,9 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    // 40%: la messa a fuoco la fa gia' il rientro in scala dello sfondo
+    // (shouldScaleBackground). Un velo all'80% cancella il contesto.
+    className={cn("fixed inset-0 z-50 bg-black/40", className)}
     {...props}
   />
 ));
@@ -38,12 +40,13 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl border bg-background",
         className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {/* Maniglia nelle proporzioni di sistema (~5x36pt), non una barra spessa. */}
+      <div className="mx-auto mt-2.5 h-1.5 w-9 rounded-full bg-muted-foreground/40" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>