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/routes/index.tsx

@@ -2,7 +2,7 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { Flame, ChevronRight } from "lucide-react";
 import { EventoCard, linkPerEvento } from "@/components/crapp/EventoCard";
 import { PromemoriaPalloni } from "@/components/crapp/PromemoriaPalloni";
-import { Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
+import { ScheletroPagina, Section, StatTile, TeamLogo } from "@/components/crapp/ui-bits";
 import { CompletaProfilo } from "@/components/crapp/ProfiloAmministrativo";
 import { Reveal } from "@/components/motion/Reveal";
 import { Barra } from "@/components/motion/Barra";
@@ -59,11 +59,14 @@ function Index() {
     ? (eventi.find((e) => e.tipo === "partita" && e.data === ultima.data) ?? null)
     : null;
 
-  if (!giocatore) return null;
+  if (!giocatore) return <ScheletroPagina />;
 
   return (
     <>
-      <Reveal as="section" className="bg-hero px-5 pb-10 pt-7 text-primary-foreground">
+      <Reveal
+        as="section"
+        className="bg-hero px-5 pb-10 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">
             <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary-foreground/60">
@@ -77,20 +80,20 @@ function Index() {
         <div className="mt-6 grid grid-cols-3 gap-2 text-center">
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="font-display text-2xl leading-none">{noi ? `${noi.pos}º` : "—"}</p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">In classifica</p>
+            <p className="text-3xs uppercase text-primary-foreground/60">In classifica</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="font-display text-2xl leading-none">
               {noi ? `${noi.vinte}-${noi.perse}` : "—"}
             </p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">Bilancio</p>
+            <p className="text-3xs uppercase text-primary-foreground/60">Bilancio</p>
           </div>
           <div className="rounded-2xl bg-primary-foreground/10 p-3">
             <p className="inline-flex items-center gap-1 font-display text-2xl leading-none">
               <Flame className="h-4 w-4 text-accent" />
               {giocatore.streak}
             </p>
-            <p className="text-[10px] uppercase text-primary-foreground/60">Streak</p>
+            <p className="text-3xs uppercase text-primary-foreground/60">Streak</p>
           </div>
         </div>
       </Reveal>
@@ -161,7 +164,7 @@ function Index() {
                   {ultima.parziali.map((p, i) => (
                     <span
                       key={i}
-                      className="rounded-lg bg-secondary px-2 py-1 text-[11px] font-semibold tabular-nums"
+                      className="rounded-lg bg-secondary px-2 py-1 text-2xs font-semibold tabular-nums"
                     >
                       {p[0]}-{p[1]}
                     </span>
@@ -196,7 +199,7 @@ function Index() {
             to="/squadra"
             className="inline-flex items-center text-xs font-semibold text-accent"
           >
-            Tutti <ChevronRight className="h-3 w-3" />
+            Tutti <ChevronRight className="h-3.5 w-3.5" />
           </Link>
         }
       >
@@ -213,7 +216,7 @@ function Index() {
             <p className="mt-1 text-xs font-semibold text-accent">
               {microcopyObiettivo(obiettivo)}
             </p>
-            <p className="mt-1 text-[11px] text-muted-foreground">{obiettivo.impatto}</p>
+            <p className="mt-1 text-2xs text-muted-foreground">{obiettivo.impatto}</p>
           </div>
         ) : null}
       </Section>