Initial independent version of CrAPP

src/components/crapp/Avatar.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@/lib/utils";
+import { useAvatar } from "@/lib/avatar-store";
+
+export function Avatar({
+  id,
+  fallback,
+  className,
+  alt,
+}: {
+  id: string;
+  fallback: string;
+  className?: string;
+  alt?: string;
+}) {
+  const src = useAvatar(id);
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={alt ?? `Foto di ${fallback}`}
+        className={cn("shrink-0 rounded-2xl object-cover", className)}
+      />
+    );
+  }
+  return (
+    <span
+      className={cn(
+        "grid shrink-0 place-items-center rounded-2xl bg-secondary font-display",
+        className,
+      )}
+    >
+      {fallback}
+    </span>
+  );
+}

src/components/crapp/BadgeDrawer.tsx

@@ -0,0 +1,152 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import type { BadgeDef, BadgeStato, Grado } from "@/lib/badges";
+import { gradoMeta, gradiOrdine, descrizioneSoglie } from "@/lib/badges";
+import { Barra } from "@/components/motion/Barra";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+function DettaglioBadge({
+  def,
+  stato,
+}: {
+  def: BadgeDef;
+  stato?: BadgeStato;
+}) {
+  const Icon = def.icon;
+  const grado = stato?.grado ?? null;
+  const meta = grado ? gradoMeta[grado] : null;
+  const prossimo = stato?.prossimo ?? null;
+
+  return (
+    <div className="space-y-4 p-4 pt-0">
+      <div className="flex items-start gap-4">
+        <span
+          className={cn(
+            "grid h-14 w-14 shrink-0 place-items-center rounded-2xl ring-1",
+            meta ? `${meta.bg} ${meta.ring}` : "bg-secondary ring-border",
+          )}
+        >
+          <Icon className={cn("h-7 w-7", meta ? meta.text : "text-muted-foreground")} />
+        </span>
+        <div className="min-w-0 flex-1">
+          <DrawerTitle className="text-xl font-bold leading-tight">{def.nome}</DrawerTitle>
+          <DrawerDescription className="mt-1 text-sm leading-relaxed">
+            {def.descrizione}
+          </DrawerDescription>
+        </div>
+      </div>
+
+      {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">
+              Stato attuale
+            </p>
+            {grado ? (
+              <span className={cn("text-[11px] font-bold uppercase", meta?.text)}>
+                {meta?.label}
+              </span>
+            ) : (
+              <span className="text-[11px] font-bold uppercase text-muted-foreground">
+                In progresso
+              </span>
+            )}
+          </div>
+          <p className="mt-1 font-display text-3xl leading-none">
+            {stato.valore} <span className="text-lg text-muted-foreground">{def.unita}</span>
+          </p>
+          {stato.prossimaSoglia ? (
+            <>
+              <Barra percentuale={stato.progresso} trackClassName="mt-3" />
+              <p className="mt-2 text-xs text-muted-foreground">
+                Mancano {stato.prossimaSoglia - stato.valore} {def.unita} per il{" "}
+                {gradoMeta[stato.prossimo as Grado].label.toLowerCase()}
+              </p>
+            </>
+          ) : (
+            <p className="mt-2 text-xs text-success">Hai raggiunto il livello massimo.</p>
+          )}
+        </div>
+      ) : null}
+
+      <div>
+        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          Soglie
+        </p>
+        <div className="grid grid-cols-3 gap-2">
+          {gradiOrdine.map((g) => {
+            const gm = gradoMeta[g];
+            const raggiunto = grado ? gradiOrdine.indexOf(grado) >= gradiOrdine.indexOf(g) : false;
+            return (
+              <div
+                key={g}
+                className={cn(
+                  "rounded-2xl p-3 text-center ring-1",
+                  raggiunto ? `${gm.bg} ${gm.ring}` : "bg-secondary ring-border",
+                )}
+              >
+                <p className={cn("text-[10px] font-bold uppercase", raggiunto ? gm.text : "text-muted-foreground")}>
+                  {gm.label}
+                </p>
+                <p className={cn("font-display text-xl leading-none", raggiunto ? "text-foreground" : "text-muted-foreground")}>
+                  {def.soglie[g]}
+                </p>
+                <p className="text-[10px] text-muted-foreground">{def.unita}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {def.celebrazione ? (
+        <p className="rounded-2xl bg-accent/10 p-3 text-center text-sm font-semibold text-accent">
+          “{def.celebrazione}”
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+/** Drawer cliccabile che mostra la descrizione e le soglie di un badge. */
+export function BadgeDrawer({
+  def,
+  stato,
+  children,
+}: {
+  def: BadgeDef;
+  stato?: BadgeStato;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{children}</DrawerTrigger>
+        <DrawerContent>
+        <DrawerHeader className="sr-only">
+          <DrawerTitle>{def.nome}</DrawerTitle>
+          <DrawerDescription>{def.descrizione}</DrawerDescription>
+        </DrawerHeader>
+        <DettaglioBadge def={def} {...(stato ? { stato } : {})} />
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <button
+              type="button"
+              className="w-full rounded-2xl bg-secondary py-3 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
+            >
+              Indietro
+            </button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}

src/components/crapp/BottomNav.tsx

@@ -0,0 +1,30 @@
+import { Link } from "@tanstack/react-router";
+import { CalendarDays, Home, Trophy, User, Users } from "lucide-react";
+
+const items = [
+  { to: "/", label: "Home", icon: Home },
+  { to: "/calendario", label: "Calendario", icon: CalendarDays },
+  { to: "/squadra", label: "Squadra", icon: Users },
+  { to: "/classifica", label: "Classifica", icon: Trophy },
+  { to: "/profilo", label: "Profilo", icon: User },
+] as const;
+
+export function BottomNav() {
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur-md">
+      <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"
+          >
+            <Icon className="h-5 w-5" strokeWidth={2.2} />
+            {label}
+          </Link>
+        ))}
+      </div>
+    </nav>
+  );
+}

src/components/crapp/CelebrazioneBadge.tsx

@@ -0,0 +1,79 @@
+import { useEffect } from "react";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useVotiSocial } from "@/lib/badge-social";
+import { useNotificheSmart } from "@/lib/notifiche-smart";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { coriandoli, useMotoRidotto } from "@/lib/motion";
+
+const toni: Record<string, string> = {
+  badge: "ring-oro/50",
+  segreto: "ring-accent/60",
+  serie: "ring-accent/40",
+  squadra: "ring-info/50",
+  social: "ring-success/50",
+};
+
+/** Focus card celebrativa: compare una sola volta per traguardo. */
+export function CelebrazioneBadge() {
+  const io = useGiocatoreCorrente();
+  const voti = useVotiSocial();
+  const { notifica, restanti, chiudi } = useNotificheSmart(io, voti.data ?? []);
+  const ridotto = useMotoRidotto();
+  const chiave = notifica?.id ?? notifica?.titolo ?? null;
+  const infermeria = notifica?.id === "segreto:s-infermeria";
+  const ritardi = notifica?.id === "segreto:s-ritardi";
+
+  useEffect(() => {
+    if (!chiave) return;
+    void coriandoli(ridotto);
+  }, [chiave, ridotto]);
+
+  if (!notifica) return null;
+
+  return (
+    <div className="anim-reveal fixed inset-0 z-50 grid place-items-end bg-foreground/40 p-4 pb-28 backdrop-blur-sm">
+      <div
+        className={cn(
+          "anim-pop w-full max-w-md rounded-3xl bg-card p-5 shadow-pop ring-2",
+          toni[notifica.tono] ?? "ring-accent/40",
+        )}
+        role="status"
+      >
+        <div className="flex items-start gap-3">
+          <span
+            className={cn(
+              "grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-accent-grad text-3xl",
+              infermeria && !ridotto && "anim-battito",
+              ritardi && !ridotto && "anim-oscilla",
+            )}
+          >
+            {notifica.emoji}
+          </span>
+          <div className="min-w-0 flex-1">
+            <p className="text-[11px] 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>
+            <p className="mt-1.5 text-sm text-muted-foreground">{notifica.testo}</p>
+          </div>
+          <button
+            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"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <button
+          type="button"
+          onClick={chiudi}
+          className="mt-4 w-full rounded-2xl bg-accent-grad px-4 py-3 text-sm font-bold uppercase tracking-wide text-accent-foreground"
+        >
+          {restanti > 0 ? `Avanti (${restanti})` : "Grande!"}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/crapp/CollezioneBadge.tsx

@@ -0,0 +1,249 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import type { Giocatore } from "@/lib/crapp-data";
+import {
+  collezioneBadge,
+  gradoMeta,
+  iconaSegreto as Lucchetto,
+  mancanoPer,
+  microcopyBadge,
+  prossimoTraguardo,
+  type BadgeStato,
+} from "@/lib/badges";
+import { badgeSocialVinti, categorieSocial, type VotoSocial, type CategoriaSocial } from "@/lib/badge-social";
+import { Reveal } from "@/components/motion/Reveal";
+import { Barra } from "@/components/motion/Barra";
+import { Numero } from "@/components/motion/Numero";
+import { BadgeDrawer } from "@/components/crapp/BadgeDrawer";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer";
+
+function CardBadge({ b, opaco, indice = 0 }: { b: BadgeStato; opaco?: boolean; indice?: number }) {
+  const Icon = b.def.icon;
+  const meta = b.grado ? gradoMeta[b.grado] : null;
+  return (
+    <Reveal
+      indice={indice}
+      className={cn(
+        "premi rounded-2xl p-3 shadow-card ring-1",
+        meta ? `${meta.bg} ${meta.ring}` : "bg-card ring-border",
+        opaco && "opacity-90",
+      )}
+    >
+      <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>
+        ) : null}
+      </div>
+      <p className="mt-1.5 text-sm font-bold leading-tight">{b.def.nome}</p>
+      <p className="text-[11px] 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-2 text-[10px] text-muted-foreground">{microcopyBadge(b)}</p>
+      )}
+    </Reveal>
+  );
+}
+
+function SocialDrawer({
+  cat,
+  conteggio,
+  children,
+}: {
+  cat: CategoriaSocial;
+  conteggio: number;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>{children}</DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="sr-only">
+          <DrawerTitle>{cat.nome}</DrawerTitle>
+          <DrawerDescription>{cat.descrizione}</DrawerDescription>
+        </DrawerHeader>
+        <div className="space-y-4 p-4 pt-0">
+          <div className="flex items-start gap-4">
+            <span className="grid h-14 w-14 shrink-0 place-items-center rounded-2xl bg-accent/15 text-2xl ring-1 ring-accent/30">
+              {cat.emoji}
+            </span>
+            <div className="min-w-0 flex-1">
+              <DrawerTitle className="text-xl font-bold leading-tight">{cat.nome}</DrawerTitle>
+              <DrawerDescription className="mt-1 text-sm leading-relaxed">
+                {cat.descrizione}
+              </DrawerDescription>
+            </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="mt-1 font-display text-3xl leading-none">
+              {conteggio}{" "}
+              <span className="text-lg text-muted-foreground">
+                {conteggio === 1 ? "volta" : "volte"}
+              </span>
+            </p>
+          </div>
+        </div>
+        <div className="mt-auto flex flex-col gap-2 p-4">
+          <DrawerClose asChild>
+            <button
+              type="button"
+              className="w-full rounded-2xl bg-secondary py-3 text-sm font-semibold text-foreground transition-colors hover:bg-secondary/80"
+            >
+              Indietro
+            </button>
+          </DrawerClose>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+/** Sezione "Collezione badge": sbloccati, in progresso e segreti. */
+export function CollezioneBadge({
+  g,
+  votiSocial = [],
+}: {
+  g: Giocatore;
+  votiSocial?: VotoSocial[];
+}) {
+  const c = collezioneBadge(g);
+  const vicino = prossimoTraguardo(g);
+  const social = badgeSocialVinti(votiSocial, g.id);
+  const socialVinti = categorieSocial.filter((cat) => social[cat.id]);
+  const pct = Math.round((c.ottenuti / c.totali) * 100);
+
+  return (
+    <div className="space-y-3">
+      <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">
+              Collezione badge
+            </p>
+            <p className="font-display text-4xl leading-none">
+              <Numero valore={c.ottenuti} />
+              <span className="text-2xl text-primary-foreground/50">/{c.totali}</span>
+            </p>
+          </div>
+          <p className="text-xs text-primary-foreground/70">
+            <Numero valore={pct} suffisso="%" /> completata
+          </p>
+        </div>
+        <Barra percentuale={pct} trackClassName="mt-3 bg-primary-foreground/15" />
+      </div>
+
+      {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">
+            Prossimo traguardo
+          </p>
+          <p className="mt-1 text-sm font-bold leading-tight">{vicino.def.nome}</p>
+          <Barra percentuale={vicino.progresso} trackClassName="mt-2" />
+          <p className="mt-2 text-xs text-muted-foreground">
+            {mancanoPer(vicino)} · {microcopyBadge(vicino)}
+          </p>
+        </div>
+      ) : null}
+
+      {c.sbloccati.length > 0 ? (
+        <div>
+          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            Sbloccati ({c.sbloccati.length})
+          </p>
+          <div className="grid grid-cols-2 gap-2">
+            {c.sbloccati.map((b, i) => (
+              <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
+                <CardBadge b={b} indice={i} />
+              </BadgeDrawer>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {c.inProgresso.length > 0 ? (
+        <div>
+          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            In progresso ({c.inProgresso.length})
+          </p>
+          <div className="grid grid-cols-2 gap-2">
+            {c.inProgresso.map((b, i) => (
+              <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
+                <CardBadge b={b} opaco indice={i} />
+              </BadgeDrawer>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {socialVinti.length > 0 ? (
+        <div>
+          <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+            Votati dai compagni
+          </p>
+          <div className="grid grid-cols-2 gap-2">
+            {socialVinti.map((cat) => (
+              <SocialDrawer key={cat.id} cat={cat} conteggio={social[cat.id] ?? 0}>
+                <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">
+                    Vinto {social[cat.id]} {social[cat.id] === 1 ? "volta" : "volte"}
+                  </p>
+                </div>
+              </SocialDrawer>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      <div>
+        <p className="mb-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+          Badge segreti
+        </p>
+        <div className="grid grid-cols-2 gap-2">
+          {c.segreti.map((b) => {
+            const Icon = b.def.icon;
+            return (
+              <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
+                <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">
+                    {b.def.celebrazione ?? "Badge segreto sbloccato."}
+                  </p>
+                </div>
+              </BadgeDrawer>
+            );
+          })}
+          {Array.from({ length: c.nascosti }).map((_, i) => (
+            <div
+              key={`nascosto-${i}`}
+              className="grid place-items-center rounded-2xl bg-secondary/60 p-3 text-center"
+            >
+              <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>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/crapp/EventoCard.tsx

@@ -0,0 +1,150 @@
+import { MapPin, Clock, Users, Cake, ArrowRight } from "lucide-react";
+import { Link } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+import { formatData, giocatori, statoMeta, type Stato } from "@/lib/crapp-data";
+import type { Evento } from "@/lib/eventi";
+import { Barra } from "@/components/motion/Barra";
+import { usePresenzeEvento, useSalvaPresenza } from "@/lib/presenze";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+
+const tipoMeta = {
+  partita: { label: "Partita", className: "bg-accent text-accent-foreground" },
+  allenamento: { label: "Allenamento", className: "bg-training text-training-foreground" },
+  evento: { label: "Eventi", className: "bg-warning text-warning-foreground" },
+  compleanno: { label: "Compleanno", className: "bg-success text-success-foreground" },
+} as const;
+
+const stati: Stato[] = ["presente", "forse", "ritardo", "assente", "infortunato"];
+
+export function linkPerEvento(e: Evento) {
+  if (e.tipo === "partita") {
+    return { to: "/partita/$id", params: { id: e.id }, label: "Apri partita" };
+  }
+  if (e.tipo === "allenamento") {
+    return { to: "/allenamento/$id", params: { id: e.id }, label: "Apri allenamento" };
+  }
+  return undefined;
+}
+
+export function EventoCard({
+  evento,
+  linkTo,
+}: {
+  evento: Evento;
+  linkTo?: { to: string; params: Record<string, string>; label: string };
+}) {
+  const { risposte } = usePresenzeEvento(evento.id);
+  const salva = useSalvaPresenza();
+  const io = useGiocatoreCorrente();
+  const stato = io ? risposte[io.id] : undefined;
+  const presentiVeri = giocatori.filter(
+    (g) => risposte[g.id] === "presente" || risposte[g.id] === "ritardo",
+  ).length;
+  const tipo =
+    evento.tipo === "partita" && !evento.campionato
+      ? { label: "Amichevole", className: "bg-accent/70 text-accent-foreground" }
+      : tipoMeta[evento.tipo];
+  const totale = giocatori.length;
+  const perc = Math.round((presentiVeri / totale) * 100);
+  const isCompleanno = evento.tipo === "compleanno";
+
+  if (isCompleanno) {
+    return (
+      <article className="premi flex items-center gap-3 rounded-3xl bg-card p-4 shadow-card">
+        <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>
+        <div className="min-w-0 flex-1">
+          <h3 className="truncate text-sm font-bold leading-tight">{evento.titolo}</h3>
+          <p className="text-xs text-muted-foreground">{evento.luogo}</p>
+        </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">
+            {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
+          </p>
+        </div>
+      </article>
+    );
+  }
+
+  return (
+    <article className="premi rounded-3xl bg-card p-4 shadow-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",
+              tipo.className,
+            )}
+          >
+            {tipo.label}
+          </span>
+          <h3 className="mt-2 text-base font-bold leading-tight">{evento.titolo}</h3>
+        </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">
+            {formatData(evento.data).split(" ")[2]?.slice(0, 3)}
+          </p>
+        </div>
+      </div>
+
+      {linkTo && (
+        <div className="mt-2 flex justify-end">
+          <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"
+          >
+            {linkTo.label} <ArrowRight className="h-3 w-3" />
+          </Link>
+        </div>
+      )}
+
+      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground">
+        <span className="inline-flex items-center gap-1">
+          <Clock className="h-3.5 w-3.5" /> {evento.ora}
+        </span>
+        <span className="inline-flex min-w-0 items-center gap-1">
+          <MapPin className="h-3.5 w-3.5 shrink-0" />
+          <span className="truncate">{evento.luogo}</span>
+        </span>
+        <span className="inline-flex items-center gap-1">
+          <Users className="h-3.5 w-3.5" /> {presentiVeri}/{totale}
+        </span>
+      </div>
+
+      <Barra percentuale={perc} altezza="h-1.5" trackClassName="mt-3" />
+
+      {io ? (
+      <div className="mt-4 flex flex-wrap gap-1.5">
+        {stati.map((s) => {
+          const meta = statoMeta[s];
+          const attivo = stato === s;
+          return (
+            <button
+              key={s}
+              type="button"
+              disabled={salva.isPending}
+              onClick={() =>
+                salva.mutate({
+                  eventoId: evento.id,
+                  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",
+                attivo ? cn(meta.className, "border-transparent shadow-card") : "bg-background text-muted-foreground",
+              )}
+            >
+{meta.label}
+            </button>
+          );
+        })}
+      </div>
+      ) : null}
+    </article>
+  );
+}

src/components/crapp/Pagelle.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { ClipboardCheck, Lock } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/crapp/Avatar";
+import { giocatori } from "@/lib/crapp-data";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { mieiVoti, pagellePartita, usePagelle, useVotaPagella } from "@/lib/pagelle";
+
+const voti = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+/** Pagelle di fine partita: voto anonimo 1-10 a ciascun compagno. */
+export function Pagelle({
+  matchId,
+  convocati = giocatori,
+  chiuse = false,
+}: {
+  matchId: string;
+  convocati?: typeof giocatori;
+  chiuse?: boolean;
+}) {
+  const io = useGiocatoreCorrente();
+  const { voti: tutti, isPending } = usePagelle();
+  const vota = useVotaPagella();
+  const [apertoPer, setApertoPer] = useState<string | null>(null);
+
+  const medie = pagellePartita(tutti, matchId);
+  const miei = io ? mieiVoti(tutti, matchId, io.id) : {};
+  const daVotare = convocati.filter((g) => g.id !== io?.id);
+  const fatti = daVotare.filter((g) => miei[g.id] !== undefined).length;
+
+  async function invia(votatoId: string, voto: number) {
+    if (!io) return;
+    setApertoPer(null);
+    try {
+      await vota.mutateAsync({ match_id: matchId, votante_id: io.id, votato_id: votatoId, voto });
+      toast.success("Voto registrato (resta anonimo)");
+    } catch {
+      toast.error("Voto non riuscito, riprova");
+    }
+  }
+
+  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">
+          <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">
+          {chiuse ? "Votazioni chiuse" : `${fatti}/${daVotare.length} votati`}
+        </span>
+      </div>
+      <p className="mt-1 text-[11px] 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>
+      ) : (
+        <div className="mt-3 space-y-1.5">
+          {convocati.map((g) => {
+            const media = medie[g.id];
+            const mio = miei[g.id];
+            const sonoIo = g.id === io?.id;
+            const aperto = apertoPer === g.id;
+            return (
+              <div key={g.id} className="rounded-2xl bg-secondary/60 p-2.5">
+                <div className="flex items-center gap-2.5">
+                  <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">
+                      {media ? `Media ${media.media} · ${media.voti} voti` : "Nessun voto"}
+                    </span>
+                  </span>
+                  {sonoIo ? (
+                    <span className="shrink-0 text-[10px] font-semibold uppercase text-muted-foreground">
+                      Sei tu
+                    </span>
+                  ) : chiuse ? (
+                    <Lock className="h-4 w-4 shrink-0 text-muted-foreground" />
+                  ) : (
+                    <button
+                      type="button"
+                      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",
+                        mio !== undefined
+                          ? "bg-accent text-accent-foreground"
+                          : "bg-card text-foreground",
+                      )}
+                    >
+                      {mio !== undefined ? `Hai dato ${mio}` : "Vota"}
+                    </button>
+                  )}
+                </div>
+                {aperto && !chiuse ? (
+                  <div className="mt-2 grid grid-cols-10 gap-1">
+                    {voti.map((v) => (
+                      <button
+                        key={v}
+                        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",
+                          mio === v ? "bg-accent text-accent-foreground" : "bg-card text-foreground",
+                        )}
+                      >
+                        {v}
+                      </button>
+                    ))}
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/crapp/PromemoriaPalloni.tsx

@@ -0,0 +1,62 @@
+import { AlertCircle } from "lucide-react";
+import { formatData } from "@/lib/crapp-data";
+import {
+  eventiPalloni,
+  eventoPrecedente,
+  eventoSuccessivo,
+  oggiISO,
+} from "@/lib/palloni-core";
+import { useTurniPalloni } from "@/lib/palloni";
+import { useEventi } from "@/lib/eventi";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+
+/** Avvisi per chi è di turno: prendere i palloni oggi, o riportarli oggi. */
+export function PromemoriaPalloni() {
+  const io = useGiocatoreCorrente();
+  const { turni } = useTurniPalloni();
+  const { eventi } = useEventi();
+  if (!io) return null;
+
+  const lista = eventiPalloni(eventi);
+
+  const oggi = oggiISO();
+  const messaggi: string[] = [];
+
+  for (const evento of lista) {
+    if (evento.data !== oggi) continue;
+
+    if (turni[evento.id] === io.id) {
+      const dopo = eventoSuccessivo(eventi, evento.id);
+      messaggi.push(
+        `Oggi tocca a te prendere i palloni a fine ${evento.tipo === "partita" ? "partita" : "allenamento"}` +
+          (dopo ? ` e riportarli il ${formatData(dopo.data)}.` : "."),
+      );
+    }
+
+    const prima = eventoPrecedente(eventi, evento.id);
+    if (prima && turni[prima.id] === io.id) {
+      messaggi.push("Ricordati di portare i palloni con te oggi: li hai presi tu la volta scorsa.");
+    }
+  }
+
+  if (messaggi.length === 0) {
+    const prossimo = lista.find((e) => e.data >= oggi && turni[e.id] === io.id);
+    if (!prossimo) return null;
+    messaggi.push(
+      `Sei incaricato dei palloni per ${prossimo.titolo} (${formatData(prossimo.data)}).`,
+    );
+  }
+
+  return (
+    <div className="mx-5 mt-4 rounded-3xl bg-accent-grad p-4 text-accent-foreground shadow-pop">
+      <p className="flex items-center gap-2 font-display text-lg uppercase leading-none">
+        <AlertCircle className="h-5 w-5" /> Turno palloni
+      </p>
+      {messaggi.map((m) => (
+        <p key={m} className="mt-2 text-xs leading-snug opacity-90">
+          {m}
+        </p>
+      ))}
+    </div>
+  );
+}

src/components/crapp/RosaPresenze.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { BellRing, HelpCircle, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/crapp/Avatar";
+import { Barra } from "@/components/motion/Barra";
+import { giocatori, isAdmin, statoMeta, type Stato } from "@/lib/crapp-data";
+import { usePresenzeEvento, useSalvaPresenza } from "@/lib/presenze";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+
+const ordine: Stato[] = ["presente", "ritardo", "forse", "infortunato", "assente"];
+
+export function RosaPresenze({ eventoId }: { eventoId: string }) {
+  const { risposte, isPending } = usePresenzeEvento(eventoId);
+  const salva = useSalvaPresenza();
+  const io = useGiocatoreCorrente();
+  const [sollecito, setSollecito] = useState(false);
+
+  const mancanti = giocatori.filter((g) => !risposte[g.id]);
+  const risposteN = giocatori.length - mancanti.length;
+  const perc = Math.round((risposteN / giocatori.length) * 100);
+  const daSollecitare = mancanti.length + giocatori.filter((g) => risposte[g.id] === "forse").length;
+
+  async function sollecita() {
+    setSollecito(true);
+    try {
+      const res = await fetch("/api/public/sollecita-presenze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ eventoId, da: io?.nome }),
+      });
+      if (!res.ok) throw new Error();
+      const dati = (await res.json()) as { inviate: number; destinatari: number };
+      toast.success(
+        dati.inviate > 0
+          ? `Sollecito inviato a ${dati.inviate} giocatori`
+          : `Nessuna notifica attiva tra i ${dati.destinatari} da sollecitare`,
+      );
+    } catch {
+      toast.error("Non sono riuscito a inviare il sollecito");
+    } finally {
+      setSollecito(false);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-3xl bg-card p-4 shadow-card">
+        <div className="flex items-baseline justify-between">
+          <p className="text-sm font-bold">
+            Hanno risposto {risposteN}/{giocatori.length}
+          </p>
+          <span className="font-display text-xl leading-none">{perc}%</span>
+        </div>
+        <Barra percentuale={perc} altezza="h-1.5" trackClassName="mt-2" />
+
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {ordine.map((s) => {
+            const n = giocatori.filter((g) => risposte[g.id] === s).length;
+            return (
+              <span
+                key={s}
+                className={cn(
+                  "rounded-full px-2.5 py-1 text-[11px] font-bold",
+                  n > 0 ? statoMeta[s].className : "bg-secondary text-muted-foreground",
+                )}
+              >
+                {statoMeta[s].emoji} {n}
+              </span>
+            );
+          })}
+          <span className="rounded-full bg-secondary px-2.5 py-1 text-[11px] 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">
+              La tua risposta
+            </p>
+            <div className="mt-2 flex flex-wrap gap-1.5">
+              {ordine.map((s) => {
+                const attivo = risposte[io.id] === s;
+                return (
+                  <button
+                    key={s}
+                    type="button"
+                    disabled={salva.isPending}
+                    onClick={() =>
+                      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",
+                      attivo
+                        ? cn(statoMeta[s].className, "border-transparent shadow-card")
+                        : "bg-background text-muted-foreground",
+                    )}
+                  >
+                    {statoMeta[s].label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+
+        {io && isAdmin(io.id) ? (
+          <button
+            type="button"
+            onClick={sollecita}
+            disabled={sollecito || daSollecitare === 0}
+            className="premi mt-4 flex w-full items-center justify-center gap-2 rounded-2xl bg-primary px-4 py-3 text-sm font-bold text-primary-foreground disabled:opacity-50"
+          >
+            {sollecito ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <BellRing className="h-4 w-4" />
+            )}
+            Sollecita {daSollecitare} giocatori
+          </button>
+        ) : null}
+      </div>
+
+      {isPending ? (
+        <p className="text-center text-xs text-muted-foreground">Carico le risposte…</p>
+      ) : null}
+
+      {ordine.map((s) => {
+        const lista = giocatori.filter((g) => risposte[g.id] === s);
+        if (lista.length === 0) return null;
+        return (
+          <Gruppo
+            key={s}
+            titolo={`${statoMeta[s].emoji} ${statoMeta[s].label}`}
+            n={lista.length}
+            lista={lista}
+          />
+        );
+      })}
+
+      {mancanti.length > 0 ? (
+        <Gruppo
+          titolo="❔ Non hanno ancora risposto"
+          n={mancanti.length}
+          lista={mancanti}
+          attenzione
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function Gruppo({
+  titolo,
+  n,
+  lista,
+  attenzione,
+}: {
+  titolo: string;
+  n: number;
+  lista: typeof giocatori;
+  attenzione?: boolean;
+}) {
+  return (
+    <div
+      className={cn(
+        "rounded-3xl bg-card p-4 shadow-card",
+        attenzione && "border border-dashed border-warning",
+      )}
+    >
+      <p className="flex items-center gap-1.5 text-xs font-bold uppercase tracking-wide text-muted-foreground">
+        {titolo} · {n}
+        {attenzione ? <HelpCircle className="h-3.5 w-3.5 text-warning" /> : null}
+      </p>
+      <div className="mt-3 space-y-2">
+        {lista.map((g) => (
+          <div key={g.id} className="flex items-center gap-3">
+            <Avatar id={g.id} fallback={String(g.numero)} className="h-8 w-8 text-xs" />
+            <span className="min-w-0 flex-1 truncate text-sm font-semibold">{g.nome}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{g.ruolo}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/crapp/ScoutEntry.tsx

@@ -0,0 +1,60 @@
+import { Link } from "@tanstack/react-router";
+import { ChevronRight, Lock, Radio } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { sessioneScaduta, usePartitaDiOggi, useSessioneScout } from "@/lib/scout-live";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { isAdmin } from "@/lib/crapp-data";
+
+/** Accesso allo scout live: attivo solo il giorno della partita e se nessun altro lo sta usando. */
+export function ScoutEntry({ variante = "grande" }: { variante?: "grande" | "compatto" }) {
+  const { pronto, partita } = usePartitaDiOggi();
+  const io = useGiocatoreCorrente();
+  const { data: sessione } = useSessioneScout(partita?.id ?? null);
+
+  // Strumento tecnico: solo i referenti/allenatori scoutizzano la partita.
+  const abilitato = !!io && isAdmin(io.id);
+
+  const attiva = sessione && !sessioneScaduta(sessione) ? sessione : null;
+  const occupato = !!attiva && attiva.giocatore_id !== io?.id;
+  const disponibile = abilitato && pronto && !!partita && !occupato;
+
+  const titolo = !abilitato ? "Scout live" : !partita ? "Scout live non attivo" : occupato ? "Scout occupato" : "Scout live";
+  const sottotitolo = !abilitato ? "Riservato ad allenatori e referenti" : !partita
+    ? "Si attiva il giorno della partita"
+    : occupato
+      ? `In uso da ${attiva!.giocatore_nome}`
+      : "Segna punti, ace e muri in tempo reale";
+
+  const contenuto = (
+    <>
+      {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>
+      {disponibile ? <ChevronRight className="h-5 w-5 shrink-0" /> : null}
+    </>
+  );
+
+  const classi = cn(
+    "flex items-center gap-3 rounded-3xl p-4 shadow-card",
+    variante === "compatto" && "gap-2 rounded-2xl p-3",
+    disponibile
+      ? "bg-accent-grad text-accent-foreground shadow-pop"
+      : "bg-card text-muted-foreground",
+  );
+
+  if (!disponibile) {
+    return (
+      <div className={classi} aria-disabled>
+        {contenuto}
+      </div>
+    );
+  }
+
+  return (
+    <Link to="/scout" className={classi}>
+      {contenuto}
+    </Link>
+  );
+}

src/components/crapp/SerieCard.tsx

@@ -0,0 +1,77 @@
+import { Flame } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Giocatore } from "@/lib/crapp-data";
+import { serieGiocatore, serieMigliore } from "@/lib/serie";
+import { Barra } from "@/components/motion/Barra";
+import { Reveal } from "@/components/motion/Reveal";
+
+/** Griglia completa delle serie di presenza (profilo). */
+export function SerieGriglia({ g }: { g: Giocatore }) {
+  const serie = serieGiocatore(g);
+  return (
+    <div className="space-y-2">
+      {serie.map((s, i) => {
+        const Icon = s.def.icon;
+        const attiva = s.valore > 0;
+        return (
+          <Reveal key={s.def.tipo} indice={i} className="premi rounded-3xl bg-card p-4 shadow-card">
+            <div className="flex items-center gap-3">
+              <span
+                className={cn(
+                  "grid h-10 w-10 shrink-0 place-items-center rounded-2xl",
+                  attiva ? "bg-accent-grad text-accent-foreground" : "bg-secondary text-muted-foreground",
+                )}
+              >
+                <Icon className="h-5 w-5" />
+              </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>
+              </div>
+              <span className="inline-flex items-center gap-1 font-display text-2xl leading-none">
+                <Flame className={cn("h-4 w-4", attiva ? "text-accent" : "text-muted-foreground/40")} />
+                {s.valore}
+              </span>
+            </div>
+            <Barra percentuale={s.progresso} trackClassName="mt-3" />
+            <p className="mt-2 text-[11px] text-muted-foreground">
+              {s.prossimo ? `${s.valore}/${s.prossimo} · ` : ""}
+              {s.messaggio}
+            </p>
+          </Reveal>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Riepilogo compatto per la home. */
+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">
+      <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" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <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>
+        </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">
+              {s.def.label}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/crapp/SondaggioCacche.tsx

@@ -0,0 +1,78 @@
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { giocatori } from "@/lib/crapp-data";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { mediaPartita, useCacche, useSalvaCacche } from "@/lib/cacche";
+
+const opzioni = [0, 1, 2, 3, 4, 5];
+
+/** Sondaggio goliardico pre-partita: quante cacche prima del fischio d'inizio. */
+export function SondaggioCacche({ eventoId }: { eventoId: string }) {
+  const io = useGiocatoreCorrente();
+  const { righe } = useCacche();
+  const salva = useSalvaCacche();
+
+  const dellaPartita = righe.filter((r) => r.evento_id === eventoId);
+  const mia = dellaPartita.find((r) => r.giocatore_id === io?.id);
+  const media = mediaPartita(righe, eventoId);
+  const classifica = [...dellaPartita]
+    .sort((a, b) => b.quantita - a.quantita)
+    .slice(0, 3)
+    .map((r) => ({ ...r, nome: giocatori.find((g) => g.id === r.giocatore_id)?.nome ?? "—" }));
+
+  async function rispondi(quantita: number) {
+    if (!io) return;
+    try {
+      await salva.mutateAsync({ evento_id: eventoId, giocatore_id: io.id, quantita });
+      toast.success("Risposta registrata 💩");
+    } catch {
+      toast.error("Non sono riuscito a salvare la risposta");
+    }
+  }
+
+  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">
+          💩 Sondaggio pre-partita
+        </p>
+        <span className="rounded-full bg-secondary px-2.5 py-1 text-[10px] font-bold uppercase text-muted-foreground">
+          {dellaPartita.length} risposte
+        </span>
+      </div>
+      <p className="mt-1 text-[11px] text-muted-foreground">
+        Quante cacche hai fatto prima di questa partita? Dato scientifico fondamentale.
+      </p>
+
+      <div className="mt-3 flex flex-wrap gap-1.5">
+        {opzioni.map((n) => (
+          <button
+            key={n}
+            type="button"
+            disabled={!io || salva.isPending}
+            onClick={() => rispondi(n)}
+            className={cn(
+              "min-w-11 rounded-xl px-3 py-2 text-sm font-bold tabular-nums transition-transform active:scale-90 disabled:opacity-50",
+              mia?.quantita === n
+                ? "bg-accent text-accent-foreground shadow-pop"
+                : "bg-secondary text-foreground",
+            )}
+          >
+            {n === 5 ? "5+" : n}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-3 flex flex-wrap items-center gap-2 text-[11px]">
+        <span className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
+          Media squadra {media}
+        </span>
+        {classifica.map((r, i) => (
+          <span key={r.giocatore_id} className="rounded-full bg-secondary px-2.5 py-1 font-semibold">
+            {i === 0 ? "🥇" : i === 1 ? "🥈" : "🥉"} {r.nome} · {r.quantita}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/crapp/TurnoPalloni.tsx

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { Check, CircleDot, Loader2, Pencil } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/crapp/Avatar";
+import { giocatori } from "@/lib/crapp-data";
+import { useAssegnaTurno, useTurniPalloni } from "@/lib/palloni";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+
+export function TurnoPalloni({ eventoId }: { eventoId: string }) {
+  const [aperto, setAperto] = useState(false);
+  const { salvati, turni, isPending } = useTurniPalloni();
+  const assegna = useAssegnaTurno();
+  const io = useGiocatoreCorrente();
+
+  const id = turni[eventoId];
+  const proposto = !salvati[eventoId];
+  const giocatore = giocatori.find((g) => g.id === id);
+
+  function scegli(giocatoreId: string) {
+    setAperto(false);
+    assegna.mutate(
+      { eventoId, giocatoreId, da: io?.nome ?? null },
+      {
+        onSuccess: () => toast.success("Turno palloni aggiornato"),
+        onError: () => toast.error("Non sono riuscito a salvare il turno"),
+      },
+    );
+  }
+
+  return (
+    <div className="mt-3 rounded-2xl bg-secondary/60 p-2.5">
+      <button
+        type="button"
+        onClick={() => setAperto((v) => !v)}
+        className="flex w-full items-center gap-2.5 text-left"
+      >
+        <span className="grid h-8 w-8 shrink-0 place-items-center rounded-xl bg-card text-accent">
+          <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">
+            Palloni
+          </span>
+          <span className="flex items-center gap-1.5 text-sm font-bold leading-tight">
+            {isPending || assegna.isPending ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+            ) : null}
+            <span className="truncate">{giocatore ? giocatore.nome : "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">
+                proposto
+              </span>
+            ) : null}
+          </span>
+        </span>
+        <Pencil className="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      {aperto ? (
+        <div className="mt-2.5 max-h-56 space-y-1 overflow-y-auto rounded-xl bg-card p-1.5">
+          {giocatori.map((g) => (
+            <button
+              key={g.id}
+              type="button"
+              onClick={() => scegli(g.id)}
+              className={cn(
+                "flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors",
+                g.id === id ? "bg-accent/10 font-bold" : "hover:bg-secondary",
+              )}
+            >
+              <Avatar id={g.id} fallback={String(g.numero)} className="h-7 w-7 text-xs" />
+              <span className="min-w-0 flex-1 truncate">{g.nome}</span>
+              {g.id === id ? <Check className="h-4 w-4 shrink-0 text-accent" /> : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/crapp/VotazioneMvp.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Crown, Vote } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { giocatori } from "@/lib/crapp-data";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import { conteggioPartita, mioVoto, useVotaMvp, useVotiMvp, type VotoMvp } from "@/lib/mvp-voti";
+
+/** Pannello di votazione MVP di una partita: un voto a testa, modificabile. */
+export function VotazioneMvp({ matchId }: { matchId: string }) {
+  const io = useGiocatoreCorrente();
+  const voti = useVotiMvp();
+  const vota = useVotaMvp();
+  const [aperto, setAperto] = useState(false);
+
+  const tutti: VotoMvp[] = voti.data ?? [];
+  const conteggio = conteggioPartita(tutti, matchId);
+  const mio = io ? mioVoto(tutti, matchId, io.id) : null;
+  const totale = conteggio.reduce((s, c) => s + c.voti, 0);
+  const testa = conteggio[0];
+  const pareggio = conteggio.length > 1 && conteggio[1]!.voti === testa?.voti;
+
+  async function invia(id: string, nome: string) {
+    if (!io) return;
+    try {
+      await vota.mutateAsync({
+        match_id: matchId,
+        votante_id: io.id,
+        votato_id: id,
+        votato_nome: nome,
+      });
+      setAperto(false);
+      toast.success(`Voto MVP registrato: ${nome}`);
+    } catch {
+      toast.error("Voto non riuscito, riprova");
+    }
+  }
+
+  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">
+          <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"
+        >
+          {mio ? "Cambia voto" : "Vota"}
+        </button>
+      </div>
+
+      <p className="mt-2 text-xs">
+        {testa && !pareggio ? (
+          <span className="inline-flex items-center gap-1 font-bold">
+            <Crown className="h-3.5 w-3.5 text-warning" /> {testa.nome} ({testa.voti})
+          </span>
+        ) : (
+          <span className="text-muted-foreground">
+            {totale === 0 ? "Nessun voto: MVP da eleggere" : "Parità: servono altri voti"}
+          </span>
+        )}
+      </p>
+      {mio ? (
+        <p className="mt-1 text-[11px] text-muted-foreground">Hai votato {mio.votato_nome}</p>
+      ) : null}
+
+      {aperto ? (
+        <div className="mt-3 grid max-h-60 grid-cols-2 gap-1.5 overflow-y-auto">
+          {giocatori.map((g) => (
+            <button
+              key={g.id}
+              type="button"
+              disabled={vota.isPending}
+              onClick={() => invia(g.id, g.nome)}
+              className={cn(
+                "truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
+                mio?.votato_id === g.id
+                  ? "bg-accent text-accent-foreground"
+                  : "bg-card text-foreground",
+              )}
+            >
+              {g.nome}
+            </button>
+          ))}
+        </div>
+      ) : 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">
+              {c.nome} · {c.voti}
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/crapp/VotoSocial.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { Check, Crown, Sparkles } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import { giocatori } from "@/lib/crapp-data";
+import { useGiocatoreCorrente } from "@/lib/user-store";
+import {
+  categorieSocial,
+  conteggioCategoria,
+  mioVotoSocial,
+  useVotaSocial,
+  useVotiSocial,
+  vincitoreCategoria,
+} from "@/lib/badge-social";
+
+/** Voto social post-partita: un compagno per categoria, veloce da mobile. */
+export function VotoSocial({ matchId }: { matchId: string }) {
+  const io = useGiocatoreCorrente();
+  const voti = useVotiSocial();
+  const vota = useVotaSocial();
+  const [aperta, setAperta] = useState<string | null>(null);
+
+  const tutti = voti.data ?? [];
+  const fatti = io
+    ? categorieSocial.filter((c) => mioVotoSocial(tutti, matchId, c.id, io.id)).length
+    : 0;
+
+  async function invia(categoria: string, id: string, nome: string) {
+    if (!io) return;
+    if (id === io.id) {
+      toast.error("Non puoi votare te stesso");
+      return;
+    }
+    try {
+      await vota.mutateAsync({
+        match_id: matchId,
+        categoria,
+        votante_id: io.id,
+        votato_id: id,
+        votato_nome: nome,
+      });
+      setAperta(null);
+      toast.success(`Voto registrato: ${nome}`);
+    } catch {
+      toast.error("Voto non riuscito, riprova");
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="rounded-2xl bg-secondary/60 px-3 py-2 text-[11px] 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
+        </span>
+      </div>
+
+      {categorieSocial.map((cat) => {
+        const Icon = cat.icon;
+        const mio = io ? mioVotoSocial(tutti, matchId, cat.id, io.id) : null;
+        const vincitore = vincitoreCategoria(tutti, matchId, cat.id);
+        const conteggio = conteggioCategoria(tutti, matchId, cat.id);
+        const totale = conteggio.reduce((s, c) => s + c.voti, 0);
+        const isOpen = aperta === cat.id;
+
+        return (
+          <div key={cat.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
+            <button
+              type="button"
+              onClick={() => setAperta(isOpen ? null : cat.id)}
+              disabled={!io}
+              className="flex w-full items-center gap-3 p-3 text-left active:scale-[0.99] disabled:opacity-60"
+              aria-expanded={isOpen}
+            >
+              <span className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl bg-secondary text-lg">
+                {cat.emoji}
+              </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">
+                  {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",
+                  mio ? "bg-success text-success-foreground" : "bg-accent text-accent-foreground",
+                )}
+              >
+                {mio ? <Check className="h-3 w-3" /> : "Vota"}
+              </span>
+            </button>
+
+            {isOpen ? (
+              <div className="grid max-h-56 grid-cols-2 gap-1.5 overflow-y-auto border-t border-border p-3">
+                {giocatori
+                  .filter((g) => g.id !== io?.id)
+                  .map((g) => (
+                    <button
+                      key={g.id}
+                      type="button"
+                      disabled={vota.isPending}
+                      onClick={() => invia(cat.id, g.id, g.nome)}
+                      className={cn(
+                        "truncate rounded-xl px-2.5 py-2 text-left text-xs font-semibold transition-colors",
+                        mio?.votato_id === g.id
+                          ? "bg-accent text-accent-foreground"
+                          : "bg-secondary text-foreground",
+                      )}
+                    >
+                      {g.nome}
+                    </button>
+                  ))}
+              </div>
+            ) : (
+              <div className="border-t border-border px-3 py-2">
+                {totale === 0 ? (
+                  <p className="text-[11px] text-muted-foreground">
+                    Nessun voto ancora: apri e scegli un compagno.
+                  </p>
+                ) : vincitore ? (
+                  <p className="inline-flex items-center gap-1.5 text-xs font-bold">
+                    <Crown className="h-3.5 w-3.5 text-oro" />
+                    <Icon className="h-3.5 w-3.5 text-accent" />
+                    {vincitore.nome} · {vincitore.voti}{" "}
+                    {vincitore.voti === 1 ? "voto" : "voti"}
+                  </p>
+                ) : (
+                  <p className="text-[11px] text-muted-foreground">
+                    Parità con {totale} voti: servono altri voti per assegnare il badge.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/crapp/ui-bits.tsx

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { statoMeta, type Stato } from "@/lib/crapp-data";
+import { Reveal } from "@/components/motion/Reveal";
+import { Numero } from "@/components/motion/Numero";
+
+export function TeamLogo({ className }: { className?: string }) {
+  return (
+    <img
+      src="/icon-192.png"
+      alt="CRAP Volley"
+      className={cn("shrink-0 rounded-2xl object-cover shadow-pop", className)}
+    />
+  );
+}
+
+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>
+          {sottotitolo ? (
+            <p className="mt-1 truncate text-sm text-primary-foreground/70">{sottotitolo}</p>
+          ) : null}
+        </div>
+        <TeamLogo className="h-11 w-11" />
+      </div>
+    </header>
+  );
+}
+
+export function Section({
+  titolo,
+  azione,
+  children,
+  indice = 0,
+}: {
+  titolo: string;
+  azione?: ReactNode;
+  children: ReactNode;
+  indice?: number;
+}) {
+  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>
+        {azione}
+      </div>
+      {children}
+    </Reveal>
+  );
+}
+
+export function StatoBadge({ stato, className }: { stato: Stato; className?: string }) {
+  const meta = statoMeta[stato];
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-[11px] font-bold uppercase",
+        meta.className,
+        className,
+      )}
+    >
+{meta.label}
+    </span>
+  );
+}
+
+export function StatTile({
+  valore,
+  label,
+  hint,
+}: {
+  valore: ReactNode;
+  label: string;
+  hint?: string;
+}) {
+  return (
+    <div className="premi rounded-2xl bg-card p-3 shadow-card">
+      <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">
+        {label}
+      </p>
+      {hint ? <p className="mt-0.5 text-[11px] text-accent">{hint}</p> : null}
+    </div>
+  );
+}