/* Font self-hostati (CSP: solo 'self'), licenza OFL, stessa famiglia (Inter):
   Inter Tight per testo e titoli (le etichette strette la stessa, con la
   spaziatura appena negativa), Inter con le cifre tabellari per numeri e dati.
   `font-display: block`: il testo aspetta il font (pochi ms dalla LAN o dalla
   cache), niente scatto da un carattere all'altro. */
@font-face { font-family: "Inter Tight"; src: url("/static/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Inter"; src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

/* ─────────────────────────────────────────────────────────────────────
   PLAYMAKER — design system "PIENO" (19/09/2026)
   La lingua nata col tabellone: COLORE PIENO, TESTO NERO SOPRA, superfici
   piatte, niente vetro, niente bagliori, niente sfumature. Il Volt è il
   colore di Playmaker: dove c'è Volt c'è l'azione che conta. I numeri sono
   Inter tabellare, i titoli Inter Tight pieno. Tutto si muove con la molla,
   solo transform e opacità.
   I nomi delle classi sono quelli di sempre: le pagine non cambiano logica.
   Lo caricano l'app giocatore e la Regia (che ci aggiunge pmx.css +
   regia-pieno.css). Circolo, officina, torre e TV restano su pm.css, il vecchio
   "luce nel buio": questo file lo sostituisce pagina per pagina.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --page: #020305;
  --app: #07080B;
  --card: #0E1014;            /* la superficie piatta delle schede */
  --card-2: #15181E;          /* un gradino sopra: tasti secondari, campi */
  --ink: #0B0C10;             /* il nero del testo sopra i colori pieni */
  --hair: rgba(255,255,255,.07);
  --hair-2: rgba(255,255,255,.12);
  --t-hi: #F4F6F9;
  --t-mid: #A8AFBD;
  --t-dim: #8B93A3;   /* ≥6:1 su near-black (WCAG) */
  --ok: #3ADB7A;
  --rec: #FF453A;
  --warn: #FFB03A;
  --volt: #C8F231; --volt-rgb: 200,242,49;
  --viola: #A08CFF; --viola-rgb: 160,140,255;
  --blu: #4A86FF; --blu-rgb: 74,134,255;       /* solo MOMENTO e ciò che lo riguarda */
  --display: "Inter Tight", system-ui, sans-serif;
  --body: "Inter Tight", system-ui, sans-serif;
  --narrow: "Inter Tight", system-ui, sans-serif;   /* stretta: chi la usa aggiunge letter-spacing: -.02em */
  --mono: "Inter", system-ui, sans-serif;           /* non è mono: le cifre si allineano con tabular-nums (vedi body) */
  --calm: cubic-bezier(.16,1,.3,1);
  --molla: cubic-bezier(.34,1.4,.64,1);        /* app.js la sostituisce con una molla vera (linear()) */
  --r-card: 24px; --r-btn: 20px;       /* le misure della pagina di gioco: riquadri 24, tasti 20 */
}
/* L'accento per sport. `--on-a` è il colore del testo SOPRA l'accento: sempre il
   nero. I bagliori di una volta (`--halo`, `--mist`) restano come nomi ma sono
   spenti: nessuna pagina deve più brillare. */
:root, :root[data-sport="padel"]  { --a: #C8F231; --a-hi: #D7F65C; --a-deep: #2B3408; --a-rgb: 200,242,49; --on-a: #0B0C10; --halo: transparent; --mist: transparent; }
:root[data-sport="tennis"] { --a: #FF7A4D; --a-hi: #FF9670; --a-deep: #4A1D0C; --a-rgb: 255,122,77; --on-a: #0B0C10; --halo: transparent; --mist: transparent; }
:root[data-sport="calcio"] { --a: #3ADB7A; --a-hi: #6BE79B; --a-deep: #0C3A20; --a-rgb: 58,219,122; --on-a: #0B0C10; --halo: transparent; --mist: transparent; }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* niente riquadro grigio di iOS al tocco su schede e righe cliccabili: la risposta
   al tocco la danno i :active (app.js accende :active su iPhone) */
html { -webkit-text-size-adjust: 100%; color-scheme: dark; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--page); color: var(--t-hi);
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  font-variant-numeric: tabular-nums;   /* ereditato: vale per tutti i numeri, anche quelli in var(--mono) */
  min-height: 100dvh; overflow-x: clip;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* `hidden` deve vincere anche su chi ha display: flex/grid (trappola nota) */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 12px; }

/* ── scena dietro il telefono (solo su schermi grandi) ── */
.scene { position: fixed; inset: 0; pointer-events: none; }
.scene .aura { position: absolute; inset: 0; background: #050608; }
.scene .grain { display: none; }

/* ── selettore sport (solo demo) ── */
.themes {
  position: fixed; top: 20px; right: 20px; z-index: 90;
  display: flex; gap: 8px; padding: 8px;
  background: var(--card); border: 1px solid var(--hair); border-radius: 999px;
}
.themes button { width: 18px; height: 18px; border-radius: 50%; opacity: .5; border: 2px solid transparent; transition: transform .35s var(--molla), opacity .3s; }
.themes button[aria-pressed="true"] { opacity: 1; transform: scale(1.15); border-color: #fff; }
.themes .t-padel  { background: #C8F231; }
.themes .t-tennis { background: #FF7A4D; }
.themes .t-calcio { background: #3ADB7A; }

/* ── telefono ── */
.stage { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: 36px 0; }
.phone {
  position: relative;
  width: min(392px, 100vw);
  height: min(824px, calc(100dvh - 72px));
  border-radius: 56px;
  background: var(--app);
  box-shadow: 0 0 0 9px #0A0B0E, 0 0 0 10px rgba(255,255,255,.08), 0 70px 160px -40px rgba(0,0,0,.95);
  overflow: hidden;
}
.phone::after { content: none; }
/* Il telefono è il riquadro di riferimento anche per ciò che è `position: fixed`
   (contain: layout): toast, fogli e avvisi stanno DENTRO il telefono sul
   computer, e sul telefono vero coprono lo schermo come prima. */
.phone { contain: layout; }
/* le schede del dock tenute vive (app.js, «le tre schede del dock»): sotto il dock,
   dentro i margini dello schermo; sotto ancora un fondo pieno che copre la pagina di sopra */
.phone .guscio, .phone .guscio-fondo { position: absolute; z-index: 19; }
.phone .guscio-fondo { inset: 0; z-index: 18; background: #020305; }
.phone .guscio { top: env(safe-area-inset-top); right: env(safe-area-inset-right); bottom: env(safe-area-inset-bottom); left: env(safe-area-inset-left);
  width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)); height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border: 0; background: #020305; visibility: hidden; opacity: 0; transition: opacity .14s, visibility 0s .14s; }
.phone .guscio.on { visibility: visible; opacity: 1; transition: opacity .14s; }
html.in-guscio .dock { display: none; }
@media (prefers-reduced-motion: reduce) { .phone .guscio, .phone .guscio.on { transition: none; } }
/* toast, velo, fogli e avviso di servizio non scorrono con la pagina. Prima erano
   `absolute` e alcune pagine li tengono DENTRO .app (che scorre): un foglio chiuso,
   parcheggiato sotto lo schermo, allungava lo scorrimento (si scrollava nel vuoto,
   schieramento: 1121 px su 844) e, a pagina scorsa (in orizzontale), il foglio
   aperto saliva fuori vista. Fixed = sempre agganciati al telefono. */
.phone .toast, .phone .scrim, .phone .sheet, .phone .svcbanner { position: fixed; }
@media (max-width: 520px), (max-height: 600px) {
  .stage { padding: 0; }
  .phone { width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; }
  .themes { top: auto; bottom: 24px; right: 14px; }
}

/* lo schermo: nero piatto. Il colore lo portano i blocchi, non lo sfondo */
.app {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 0 20px;
  /* in orizzontale la tacca e l'isola stanno a lato: il contenuto non ci finisce sotto */
  padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right));
  background: var(--app);
}
.app::-webkit-scrollbar { display: none; }
/* La pagina è una colonna flessibile che scorre: senza questa riga, quando il
   contenuto è più alto dello schermo il browser SCHIACCIA i figli invece di far
   scorrere (righe di chip tagliate, spaziatori che spariscono, blocchi che si
   accavallano). Chi deve davvero cedere spazio lo dichiara con `.cede`. */
.app > * { flex-shrink: 0; }
.app > .cede { flex-shrink: 1; min-height: 0; }
/* ── SCHERMATA UNICA (dal 13/10/2026) ──
   Ogni pagina giocatore sta in UNA videata: i comandi sono sempre in vista,
   senza cercarli scorrendo. Se una lista cresce, scorre SOLO lei dentro al suo
   riquadro (.cede); tutto il resto resta fermo. Chi ha il dock in basso lascia
   lo spazio con .condock, così la lista non ci finisce sotto. */
.app > .cede { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app > .cede::-webkit-scrollbar { display: none; }
/* Telefono in ORIZZONTALE (schermo basso): una videata non basta, e il riquadro
   che cede si schiacciava a zero (le partite sparivano sotto il titolo). Qui
   scorre tutta la pagina e le liste tornano alla loro altezza. */
@media (orientation: landscape) and (max-height: 500px) {
  .app > .cede { flex-shrink: 0; overflow-y: visible; }
}
.app.condock { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.app.quiet { background: var(--app); }

/* ── marchio ── */
.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: max(38px, env(safe-area-inset-top)); }
.brand .lockup { height: 44px; color: #fff; }
.brand.small { flex-direction: row; justify-content: center; gap: 10px; padding-top: max(26px, env(safe-area-inset-top)); }
.brand.small .lockup { height: 26px; }
.lockup .ring { stroke: var(--a); transition: stroke .6s; }
.lockup .ball { fill: var(--a); transition: fill .6s; }
.lockup text { font-family: var(--body); }
.brand .campo {
  margin-top: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--t-mid);
}

/* ── tipografia ── */
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-dim); }
/* il titolo: pieno e stretto (il nome "thin" resta per non toccare le pagine).
   La parte in <b> è quella che conta: prende il colore. */
.title-thin { font-family: var(--display); font-weight: 700; letter-spacing: -.025em; line-height: 1; text-wrap: balance; }
.title-thin b { font-weight: 700; color: var(--a); }
.num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── bottoni: il primario è un blocco di colore pieno con testo nero ── */
.go, .btn-white {
  width: 100%; max-width: 340px; min-height: 62px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-btn);
  background: var(--a); color: var(--on-a); font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  transition: transform .35s var(--molla), opacity .2s;
}
.btn-white { background: #fff; color: var(--ink); }
.go:active, .btn-white:active { transform: scale(.965); }
.go:disabled, .btn-white:disabled { opacity: .35; pointer-events: none; }
.go svg, .btn-white svg { width: 20px; height: 20px; stroke-width: 2.2; }
.btn-ghost {
  width: 100%; max-width: 340px; min-height: 58px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--r-btn);
  background: var(--card-2); border: 1px solid var(--hair-2);
  color: var(--t-hi); font-weight: 600; font-size: 15px;
  transition: background .2s, transform .35s var(--molla);
}
.btn-ghost:active { transform: scale(.965); }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--t-hi);
  background: var(--card-2); border: 1px solid var(--hair-2);
  transition: background .25s, transform .35s var(--molla);
}
.icon-btn:active { transform: scale(.9); }

/* :hover solo dove c'è un puntatore vero: su iPhone il tocco lascia l'hover
   «appiccicato» al tasto finché non si tocca altrove (sembrava un tasto bloccato) */
@media (hover: hover) {
  .btn-ghost:hover, .icon-btn:hover { background: #1B1F27; }
  .dock button:hover, .dock a:hover { color: var(--t-hi); }
}

/* ── chips: l'attiva è bianca, piena ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--t-mid);
  background: var(--card-2); border: 1px solid var(--hair);
  transition: background .25s, color .25s, transform .35s var(--molla);
}
.chip:active { transform: scale(.94); }
.chip[aria-pressed="true"], .chip.on { background: #fff; color: var(--ink); border-color: #fff; }

/* ── input ── */
.field { width: 100%; text-align: left; }
.field label { display: block; padding: 0 4px 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--t-dim); }
.field input {
  width: 100%; min-height: 56px; padding: 0 18px;
  border-radius: 18px; border: 1.5px solid var(--hair-2);
  background: var(--card);
  color: var(--t-hi); font-size: 16px; /* ≥16px: niente zoom iOS */
  transition: border-color .25s, background .25s;
}
.field input::placeholder { color: var(--t-dim); }
.field input:focus { outline: none; border-color: var(--a); background: var(--card-2); }

/* ── la scheda: piatta (si chiamava "di vetro") ── */
.pane {
  position: relative;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--hair-2);
}
/* la scheda che conta: colore pieno, testo nero — come VAR e i blocchi dei punti */
.pane.piena, .piena { background: var(--a); color: var(--on-a); border-color: var(--a); }
.piena .eyebrow, .piena .sub { color: rgba(11,12,16,.66); }

/* ── dock: barra piatta, e la voce attiva è una pastiglia BIANCA che scivola
      con la molla (lo stesso cursore del 40 pari) ── */
.dock {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20;
  display: flex; align-items: center; gap: 6px;
  padding: 8px; border-radius: 999px;
  background: var(--ink); border: 1px solid var(--hair-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.dock button, .dock a {
  position: relative; min-width: 82px; height: 52px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--t-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em;
  transition: color .3s var(--calm), transform .35s var(--molla);
}
.dock button:active, .dock a:active { transform: scale(.93); }
/* la pastiglia si sposta con transform (app.js → translateX), non con left/width:
   niente layout a ogni fotogramma, la muove il compositor */
.dock .scivolo {
  position: absolute; top: 8px; left: 0; height: 52px; border-radius: 999px;
  background: #fff;
  opacity: 0; z-index: 0;
  transition: transform .5s var(--molla);
  will-change: transform;
}
.dock .scivolo.pronta { opacity: 1; }
.dock a, .dock button { z-index: 1; }
.dock [aria-current], .dock [aria-current]:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dock .scivolo { transition: none; } }

/* ── LE DUE PAGINE DELLA CLIP (editor e clip salvate) hanno la STESSA testata e
      lo STESSO cursore Taglia | Monta, definiti qui una volta sola: prima erano
      scritti due volte, diversi (margini, misura del contatore, ombra), e al cambio
      pagina la pastiglia saltava. Stessa geometria = il cursore sembra uno solo. ── */
.top.clip { display: flex; align-items: center; gap: 12px; padding-top: max(24px, env(safe-area-inset-top)); min-height: calc(max(24px, env(safe-area-inset-top)) + 46px); }
.top.clip .who { flex: 1; min-width: 0; text-align: left; }
/* il titolo si stringe con la testata (container query): sui telefoni stretti non diventa «S…» */
.top.clip { container-type: inline-size; }
.top.clip .who b { display: block; font-family: var(--display); font-size: 24px; font-size: clamp(17px, 5.8cqw, 24px); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top.clip .who span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; line-height: 1.4; letter-spacing: .08em; color: var(--t-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.expiry-row { display: flex; justify-content: center; align-items: flex-end; gap: 14px; height: 30px; }   /* alta uguale anche quando è vuota */

nav.via { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 12px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--hair); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* il cursore: una pastiglia bianca VERA che scivola sotto le scritte con la molla,
   si schiaccia un filo quando la tocchi e si può trascinare (app.js → PM.via) */
nav.via .cursore { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 2); border-radius: 999px; background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.35); will-change: transform;
  transform: translateX(calc(var(--i, 0) * 100%)) scale(var(--premi, 1)); transition: transform .55s var(--molla); }
nav.via.trascina .cursore { transition: transform .1s linear; }
nav.via.subito .cursore, .via.subito .tratto, .via.subito .tratto b { transition: none; }
nav.via .tratto { position: relative; z-index: 1; height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; color: var(--t-mid); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  -webkit-user-drag: none; transition: color .3s var(--calm); }
nav.via .tratto.qui { color: var(--ink); }
nav.via .tratto svg { width: 16px; height: 16px; stroke-width: 2.2; flex: none; }
/* il conto delle clip ha SEMPRE la stessa misura: cambia solo colore, così il testo non si sposta */
nav.via .tratto b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; flex: none;
  background: var(--a); color: var(--on-a); font-family: var(--mono); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
  transition: background .3s var(--calm), color .3s var(--calm); }
nav.via .tratto.qui b { background: var(--ink); color: #fff; }
nav.via .luce { position: absolute; left: 18px; right: 18px; bottom: -9px; height: 3px; border-radius: 99px; background: var(--hair-2); overflow: hidden; pointer-events: none; }
nav.via .luce i { display: block; height: 100%; width: 100%; border-radius: 99px; background: var(--a); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--calm); will-change: transform; }
/* clip salvata (o già salvata): la voce fa un saltello e lascia partire un anello Volt */
nav.via .tratto.gia { animation: viapulse .6s var(--molla); }
nav.via .tratto.gia::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--a); pointer-events: none; animation: viaring .7s var(--calm) both; }
@keyframes viapulse { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes viaring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.16, 1.7); } }
@media (prefers-reduced-motion: reduce) { nav.via .cursore { transition-duration: .15s; } nav.via .tratto.gia, nav.via .tratto.gia::after { animation: none; } }

/* ── toast ── */
.toast {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(10px);
  bottom: 92px; z-index: 30; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: 999px;
  background: var(--ink); border: 1px solid var(--hair-2);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: opacity .3s var(--calm), transform .45s var(--molla);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a); }

/* ── sheet / dialog dentro il telefono ── */
.scrim {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(2,3,5,.74);
  opacity: 0; pointer-events: none; transition: opacity .35s var(--calm);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 61;
  border-radius: 32px; padding: 26px 20px max(20px, env(safe-area-inset-bottom));
  background: var(--card); border: 1px solid var(--hair-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.8);
  transform: translateY(112%); transition: transform .55s var(--calm), visibility 0s linear .55s;
  /* chiusa è anche INVISIBILE, non solo fuori schermo: Safari su iPhone mostra un
     pezzo di pagina sotto la sua barra flottante, e la scheda parcheggiata lì si vedeva */
  visibility: hidden;
  text-align: center;
  /* mai più alto dello schermo (telefono in orizzontale, testo grande): scorre lui */
  max-height: calc(100% - 20px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet.on { transform: none; visibility: visible; transition: transform .55s var(--calm), visibility 0s; }
.sheet h3 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; }
.sheet .sub { margin-top: 10px; font-size: 13.5px; color: var(--t-mid); text-wrap: pretty; }
.sheet .sheet-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 20px; }
.sheet .go { max-width: none; }
.sheet .btn-ghost { max-width: none; }

/* ── countdown scadenza ── */
.expiry {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--t-dim);
}
.expiry svg { width: 12px; height: 12px; }
.expiry.hot { color: var(--warn); }
.expiry.dead { color: var(--t-dim); }

/* ── REC ── */
.recline { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--t-dim); }
.recline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }

/* ── icone lucide: un filo più piene, come i titoli ── */
svg.lucide { stroke-width: 1.9; }
.icon-btn svg { width: 19px; height: 19px; }
.dock svg { width: 19px; height: 19px; }

/* ── animazioni: solo transform e opacità ──
   L'entrata a gradini (.rise…) è per la PRIMA apertura. Passando da una pagina
   all'altra dell'app (html.arrivo, app.js) la pagina c'è già tutta: il cambio lo
   fa la transizione del browser qui sotto, non un secondo di blocchi che salgono. ── */
@media (prefers-reduced-motion: no-preference) {
  .rise   { animation: rise .7s var(--calm) both; }
  .rise-1 { animation: rise .7s var(--calm) .08s both; }
  .rise-2 { animation: rise .7s var(--calm) .16s both; }
  .rise-3 { animation: rise .7s var(--calm) .24s both; }
  .land   { animation: land .9s var(--molla) .1s both; }
  .focusin{ animation: rise .8s var(--calm) .3s both; }
  .recline .dot { animation: pulse 1.6s ease-in-out infinite; }
}
html.arrivo :is(.rise, .rise-1, .rise-2, .rise-3, .land, .focusin) { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ── cambio pagina: View Transitions tra documenti (Chrome/Edge 126+, Safari 18.2+).
   Il browser tiene la pagina vecchia finché la nuova è pronta e le dissolve una
   nell'altra; il dock resta fermo e la pastiglia bianca SCIVOLA dalla voce di prima
   a quella nuova. Dove non c'è, il cambio è secco (e comunque immediato). ── */
@view-transition { navigation: auto; }
.dock { view-transition-name: dock; }
.dock .scivolo { view-transition-name: scivolo; }
/* le voci hanno un nome loro: nella transizione stanno SOPRA la pastiglia che scivola
   (altrimenti il bianco copre icona e scritta finché non arriva) */
.dock a:nth-of-type(1) { view-transition-name: dock-1; }
.dock a:nth-of-type(2) { view-transition-name: dock-2; }
.dock a:nth-of-type(3) { view-transition-name: dock-3; }
::view-transition-group(*) { animation-duration: .28s; animation-timing-function: var(--calm); }
::view-transition-group(scivolo) { animation-duration: .45s; animation-timing-function: var(--molla); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes land { from { opacity: 0; transform: translateY(22px) scale(.94); } }
@keyframes pulse { 50% { opacity: .35; } }
/* il saltello dei contatori (lo stesso del tabellone) */
.salta { animation: salta .6s var(--molla); }
@keyframes salta { 0% { scale: 1; } 35% { scale: 1.08; } 100% { scale: 1; } }

/* ── banner di servizio: il campo non risponde, l'app lo dice SUBITO, a
   tutto schermo; si chiude con "Ho capito" e non torna a disturbare finché
   il guasto è lo stesso (si riarma solo quando il servizio torna su) ── */
/* ── le telecamere non rispondono: lo stesso foglio bianco dell'ingresso sale dal
   basso con la molla; la telecamera si barra da sola, il punto ambra respira.
   Una volta per guasto, su qualunque pagina (vedi PM.sorvegliaVideo). ── */
.svcbanner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 24px 22px max(22px, calc(env(safe-area-inset-bottom) + 12px));
  border-radius: 32px 32px 0 0; background: var(--t-hi); color: var(--ink);
  box-shadow: 0 -30px 80px rgba(0,0,0,.6);
  transform: translateY(110%); visibility: hidden;
  transition: transform .75s var(--molla), visibility 0s linear .75s;
}
.svcbanner.on { transform: none; visibility: visible; transition: transform .75s var(--molla), visibility 0s; }
.svcbanner .svc-cam { position: relative; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 22px; background: var(--ink); color: var(--t-hi); display: grid; place-items: center; }
.svcbanner .svc-cam svg { width: 30px; height: 30px; }
.svcbanner .svc-cam .svc-taglio { stroke: var(--warn); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.svcbanner.on .svc-cam .svc-taglio { animation: svc-taglia .5s var(--calm) .55s forwards; }
@keyframes svc-taglia { to { stroke-dashoffset: 0; } }
.svcbanner .eyebrow { color: rgba(11,12,16,.6); }
.svcbanner .svc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 8px; display: inline-block; vertical-align: middle; animation: svc-respira 1.8s ease-in-out infinite; }
@keyframes svc-respira { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } }
.svcbanner b { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 8.4vw, 34px); letter-spacing: -.025em; line-height: 1.02; text-wrap: balance; margin-top: 4px; }
.svcbanner .svc-sub { margin-top: 6px; max-width: 34ch; font-size: 15px; line-height: 1.4; font-weight: 500; color: rgba(11,12,16,.72); text-wrap: pretty; }
.svcbanner .svcok {
  align-self: stretch; margin-top: 18px; min-height: 58px; padding: 0 28px; border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: var(--t-hi); font-family: var(--body); font-size: 15.5px; font-weight: 700;
  transition: transform .35s var(--molla);
}
.svcbanner .svcok:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .svcbanner { transition: none; } .svcbanner .svc-dot, .svcbanner.on .svc-cam .svc-taglio { animation: none; stroke-dashoffset: 0; } }

/* ── la medaglia del livello (profilo, riassunto, classifica): un tondo di colore
   PIENO col numero romano nero dentro. Il metallo è il colore, il gradino è il numero.
   data-tier = bronzo | argento | oro | diamante | none (in valutazione). ── */
:root { --bronzo: #D99A6C; --argento: #D4DBE6; --oro: #F5C84B; --diamante: #8EE7FF; }
.medaglia { --m: var(--card-2); flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--m); color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: -.02em; line-height: 1; }
.medaglia[data-tier="bronzo"] { --m: var(--bronzo); } .medaglia[data-tier="argento"] { --m: var(--argento); }
.medaglia[data-tier="oro"] { --m: var(--oro); } .medaglia[data-tier="diamante"] { --m: var(--diamante); }
.medaglia[data-tier="none"] { color: var(--t-dim); border: 2px dashed rgba(255,255,255,.22); background: none; font-size: 12px; }
.medaglia.grande { width: 96px; height: 96px; font-size: 34px; }
.medaglia.mini { width: 22px; height: 22px; font-size: 9px; }
.tinta-livello[data-tier="bronzo"] { color: var(--bronzo); } .tinta-livello[data-tier="argento"] { color: var(--argento); }
.tinta-livello[data-tier="oro"] { color: var(--oro); } .tinta-livello[data-tier="diamante"] { color: var(--diamante); }

/* ══ IL CAMPO DA PADEL IN 3D (solo CSS, niente librerie: l'app gira in LAN).
   Modello in px, 18 px al metro: pavimento 180×360, vetri di fondo alti 54 (3 m)
   con la rete metallica sopra (18), laterali col vetro alle estremità e la rete in
   mezzo, rete di gioco alta 18 a metà. Arriva dal fondo con la molla, le righe si
   tracciano, i vetri si ALZANO uno a uno, poi la rete, poi entra una palla che
   palleggia da sola. Tutto transform e opacità. Lo monta PM.campo3d(el).
   Variabili per cambiare colore (sul Volt del tutorial le linee sono nere):
   --c3d-linea, --c3d-terra, --c3d-vetro, --c3d-bordo, --c3d-palla, --c3d-ombra.
   --s è la scala (la pagina la calcola dallo spazio che ha). ══ */
.c3d {
  --s: 1; --rx: 58deg; --rz: -22deg; --px: 0deg; --py: 0deg;
  --c3d-linea: var(--volt); --c3d-terra: #0F1116; --c3d-vetro: rgba(255,255,255,.07);
  --c3d-bordo: rgba(255,255,255,.3); --c3d-palla: var(--volt); --c3d-ombra: rgba(0,0,0,.55); --c3d-rete: rgba(255,255,255,.55);
  perspective: 1100px; perspective-origin: 50% 36%;
  display: grid; place-items: center;
}
.c3d-entra, .c3d-idle, .campo3d { transform-style: preserve-3d; }
.campo3d {
  position: relative; width: 180px; height: 360px; margin-top: 40px;
  transform: scale3d(var(--s), var(--s), var(--s)) rotateX(calc(var(--rx) + var(--py))) rotateZ(calc(var(--rz) + var(--px)));
  transition: transform .9s var(--calm);
}
.c3d-terra { position: absolute; inset: 0; border-radius: 4px; background: var(--c3d-terra); box-shadow: 0 0 0 1.5px var(--c3d-linea); }
.c3d-terra svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c3d-terra .c3d-riga { fill: none; stroke: var(--c3d-linea); stroke-width: 2.5; stroke-linecap: round; }
/* i vetri: pannelli in piedi sul bordo. --fine è la posa da fermi; nascono sdraiati (--da) */
.c3d-vetro { position: absolute; background: var(--c3d-vetro); border: 1px solid var(--c3d-bordo); box-sizing: border-box; overflow: hidden; transform: var(--fine); }
.c3d-vetro > i { position: absolute; inset: -40% -60%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-60%); }
.c3d-vetro.f1 { transform-origin: bottom; --da: rotateX(0deg); --fine: rotateX(-90deg); }
.c3d-vetro.f2 { transform-origin: top; --da: rotateX(0deg); --fine: rotateX(90deg); }
.c3d-vetro.sx { transform-origin: right; --da: rotateY(0deg); --fine: rotateY(90deg); }
.c3d-vetro.dx { transform-origin: left; --da: rotateY(0deg); --fine: rotateY(-90deg); }
/* la rete metallica (sopra i vetri di fondo, in mezzo ai laterali): una maglia fine */
.c3d-vetro.maglia { background:
  repeating-linear-gradient(45deg, var(--c3d-bordo) 0 .8px, transparent .8px 4px),
  repeating-linear-gradient(-45deg, var(--c3d-bordo) 0 .8px, transparent .8px 4px); opacity: .7; }
.c3d-vetro.maglia > i { display: none; }
/* la rete sopra i vetri di fondo: stesso bordo, alzata di 54 (l'altezza del vetro) */
.c3d-vetro.f1.maglia { --da: translateZ(0) rotateX(0deg); --fine: translateZ(54px) rotateX(-90deg); }
.c3d-vetro.f2.maglia { --da: translateZ(0) rotateX(0deg); --fine: translateZ(54px) rotateX(90deg); }
/* la rete di gioco: maglia più fitta, banda bianca in cima */
.c3d-rete { position: absolute; left: -3px; top: 162px; width: 186px; height: 18px; transform-origin: bottom; transform: rotateX(-90deg);
  --da: rotateX(0deg); --fine: rotateX(-90deg);
  background: repeating-linear-gradient(90deg, var(--c3d-rete) 0 .8px, transparent .8px 3.2px), repeating-linear-gradient(0deg, var(--c3d-rete) 0 .8px, transparent .8px 3.2px);
  border-top: 2px solid var(--t-hi); }
.c3d-rete::before, .c3d-rete::after { content: ""; position: absolute; top: -3px; bottom: 0; width: 3px; background: var(--t-hi); border-radius: 2px; }
.c3d-rete::before { left: 0; } .c3d-rete::after { right: 0; }
/* la palla: un tondo che guarda sempre la camera (annulla la rotazione del campo); l'ombra resta a terra */
.c3d-palla { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0, var(--c3d-palla) 28%, color-mix(in srgb, var(--c3d-palla) 55%, #000) 100%);
  transform: translate3d(56px, 300px, 0) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); opacity: 0; }
.c3d-ombra { position: absolute; left: -9px; top: -5px; width: 18px; height: 10px; border-radius: 50%; background: var(--c3d-ombra); transform: translate(56px, 300px); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .c3d-entra { animation: c3d-arriva 1.1s var(--molla) both .1s; }
  @keyframes c3d-arriva { from { opacity: 0; transform: translate3d(0, 70px, -300px); } to { opacity: 1; transform: none; } }
  .c3d-idle { animation: c3d-ondeggia 9s ease-in-out infinite alternate 1.2s; }
  @keyframes c3d-ondeggia { from { transform: rotateZ(-1.6deg) translateY(-3px); } to { transform: rotateZ(1.6deg) translateY(3px); } }
  .c3d-terra .c3d-riga { stroke-dasharray: 1; stroke-dashoffset: 1; animation: c3d-traccia 1s var(--calm) forwards .45s; }
  .c3d-terra .c3d-riga.dopo { animation-delay: .75s; }
  @keyframes c3d-traccia { to { stroke-dashoffset: 0; } }
  .c3d-vetro, .c3d-rete { animation: c3d-alza .95s var(--molla) both; }
  @keyframes c3d-alza { from { transform: var(--da); } to { transform: var(--fine); } }
  .c3d-vetro.f1 { animation-delay: .95s; }
  .c3d-vetro.sx { animation-delay: 1.1s; }
  .c3d-vetro.dx { animation-delay: 1.2s; }
  .c3d-vetro.f2 { animation-delay: 1.35s; }
  .c3d-rete { animation-delay: 1.55s; }
  .c3d-vetro > i { animation: c3d-riflesso 7s ease-in-out infinite 2.4s; }
  @keyframes c3d-riflesso { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
  .c3d-palla { animation: c3d-appare .35s both 2.1s, c3d-palleggio 3.4s infinite alternate 2.1s; }
  .c3d-ombra { animation: c3d-appare .35s both 2.1s, c3d-ombra 3.4s infinite alternate 2.1s; }
  @keyframes c3d-appare { to { opacity: 1; } }
  /* il palleggio: tre rimbalzi che attraversano la rete; sale frenando, scende accelerando */
  @keyframes c3d-palleggio {
    0%   { transform: translate3d(56px, 300px, 0)    rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
    30%  { transform: translate3d(80px, 206px, 58px) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
    58%  { transform: translate3d(104px, 118px, 0)   rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
    80%  { transform: translate3d(118px, 76px, 30px) rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); animation-timing-function: cubic-bezier(.6,0,.8,.4); }
    100% { transform: translate3d(130px, 44px, 0)    rotateZ(calc(-1 * var(--rz))) rotateX(calc(-1 * var(--rx))); }
  }
  @keyframes c3d-ombra {
    0%   { transform: translate(56px, 300px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
    30%  { transform: translate(80px, 206px) scale(.45); opacity: .35; animation-timing-function: cubic-bezier(.6,0,.8,.4); }
    58%  { transform: translate(104px, 118px) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
    80%  { transform: translate(118px, 76px) scale(.65); opacity: .55; animation-timing-function: cubic-bezier(.6,0,.8,.4); }
    100% { transform: translate(130px, 44px) scale(1); opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .c3d-palla, .c3d-ombra { opacity: 1; }
  .c3d-vetro > i { display: none; }
}

/* ── APP SULLA HOME (display-mode: standalone) ──
   Senza le barre del browser la pagina intera non deve rimbalzare né tirarsi
   giù per ricaricare (scorrono solo le liste, che hanno già il loro contenimento),
   e la pressione lunga su link e immagini non apre l'anteprima di Safari. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }
  a, img { -webkit-touch-callout: none; }
}
/* il foglio «gira il telefono»: lo crea app.js solo con l'app installata, su un
   telefono, nelle pagine fatte per il verticale (iPhone non si può bloccare) */
.gira { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .gira {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--page); color: var(--t-hi);
  }
  .gira svg { width: 46px; height: 46px; margin-bottom: 6px; color: var(--a); }
  .gira b { font: 700 26px/1.1 var(--display); letter-spacing: -.03em; }
  .gira span { font-size: 14px; color: var(--t-mid); }
}

/* ── SPLASH D'APERTURA (avvio.js): copre la pagina finché è pronta, una volta per
   sessione. Il marchio arriva con un piccolo scale+fade e la freccia play si
   accende dal grigio al Volt; poi tutto si dissolve. Le entrate a gradini
   della pagina sotto restano ferme finché html[data-avvio] non se ne va. ── */
#splash { display: none; }
html[data-avvio] #splash {
  position: fixed; inset: 0; z-index: 1001;
  display: grid; place-items: center;
  background: var(--page);
  transition: opacity .3s var(--calm);
}
html[data-avvio] #splash.via { opacity: 0; pointer-events: none; }
#splash svg { width: 92px; height: 92px; fill: #fff; animation: splash-in .45s var(--molla) both; }
#splash svg path:last-child { fill: var(--t-dim); animation: splash-play .4s var(--calm) .25s both; }
@keyframes splash-in { from { opacity: 0; transform: scale(.8); } }
@keyframes splash-play { to { fill: var(--volt); } }
html[data-avvio] :is(.rise, .rise-1, .rise-2, .rise-3, .land, .focusin) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html[data-avvio] #splash { transition-duration: .15s; }
  #splash svg, #splash svg path { animation: none; }
  #splash svg path:last-child { fill: var(--volt); }
}