/* Font self-hostati (CSP: solo 'self'), licenza OFL, stessa fonderia (Omnibus-Type):
   Archivo per il testo, Archivo Wide (la stessa famiglia a larghezza 118) per i
   titoli, Archivo Narrow (78) per le etichette strette, Chivo Mono per numeri e
   dati, con lo zero barrato di serie. `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: "Archivo"; src: url("/static/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Archivo Wide"; src: url("/static/fonts/archivo-wide.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Archivo Narrow"; src: url("/static/fonts/archivo-narrow.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Chivo Mono"; src: url("/static/fonts/chivo-mono.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
   Chivo Mono, i titoli Archivo Wide 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: "Archivo Wide", "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --narrow: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, monospace;
  --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; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  background: var(--page); color: var(--t-hi);
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  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; }
@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;
  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; }
.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: "Archivo", 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:hover { background: #1B1F27; }
.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:hover { background: #1B1F27; }
.icon-btn:active { transform: scale(.9); }

/* ── 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:hover, .dock a:hover { color: var(--t-hi); }
.dock button:active, .dock a:active { transform: scale(.93); }
.dock .scivolo {
  position: absolute; top: 8px; height: 52px; border-radius: 999px;
  background: #fff;
  opacity: 0; z-index: 0;
  transition: left .5s var(--molla), width .5s var(--molla);
  will-change: left, 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; }
.top.clip .who b { display: block; font-family: var(--display); font-size: 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;
}
.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à ── */
@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; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@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; }
}

/* ══ IL TELEFONO IN 3D (tutorial): una scocca nera con spessore, lo schermo dentro,
   fluttua appena. --rz lo gira (il tabellone in orizzontale). ══ */
.tel3d { perspective: 900px; display: grid; place-items: center; }
.tel { --rz: 0deg; position: relative; width: 150px; height: 300px; border-radius: 30px; background: var(--ink); transform-style: preserve-3d;
  transform: rotateY(-16deg) rotateX(7deg) rotateZ(var(--rz)); box-shadow: 0 40px 60px -30px rgba(0,0,0,.5); }
.tel::before { content: ""; position: absolute; inset: -1px; border-radius: 31px; background: #262a33; transform: translateZ(-9px); }
.tel::after { content: ""; position: absolute; left: 50%; top: 10px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: #262a33; transform: translateZ(1px); }
.tel .schermo { position: absolute; inset: 8px; border-radius: 23px; overflow: hidden; background: var(--volt); transform: translateZ(.5px); }
@media (prefers-reduced-motion: no-preference) {
  .tel3d .tel { animation: tel-fluttua 6s ease-in-out infinite alternate; }
  @keyframes tel-fluttua { from { transform: rotateY(-18deg) rotateX(6deg) rotateZ(var(--rz)) translateY(-4px); } to { transform: rotateY(-12deg) rotateX(9deg) rotateZ(var(--rz)) translateY(4px); } }
}