/* Classifica Mobile — foglio di stile unico.
 *
 * Mobile-first: le regole di base valgono per il telefono, che e' dove i soci
 * guarderanno la classifica il 90% delle volte. Le media query aggiungono spazio
 * sugli schermi grandi, mai il contrario.
 *
 * I colori non sono scritti qui: arrivano da configurazione/circolo.json come
 * variabili CSS (vedi base.html). Cambiare circolo non deve richiedere di
 * toccare il foglio di stile.
 */

/* ------------------------------------------------------------------ i caratteri */

/* Serviti dal nostro dominio e non dal CDN di Google: caricarli da li' manderebbe
 * l'indirizzo IP di ogni visitatore a un server extraeuropeo, e sarebbe un
 * trasferimento di dati da dichiarare nell'informativa. Ridotti ai soli glifi che
 * usiamo: 103 KB in tutto invece di oltre un megabyte. */
@font-face {
  font-family: "Rajdhani";
  src: url("../font/rajdhani-500.371d454cc7eb.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Rajdhani";
  src: url("../font/rajdhani-600.2766d03b2890.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Rajdhani";
  src: url("../font/rajdhani-700.6188ccb45871.woff2") format("woff2");
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../font/inter-400.c5407032f5a1.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../font/inter-600.2a89d38c4453.woff2") format("woff2");
  font-weight: 600; font-display: swap; font-style: normal;
}

:root {
  --titoli: "Rajdhani", system-ui, sans-serif;
  --testo: "Inter", system-ui, -apple-system, sans-serif;

  --spazio: 1rem;
  --raggio: 12px;
  --larghezza-massima: 46rem;
}

/* --------------------------------------------------------------------- di base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo-colore);
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.5;
  /* Su iPhone la barra inferiore copre il fondo pagina: questo la tiene in conto. */
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: inherit; }

.contenuto {
  max-width: var(--larghezza-massima);
  margin: 0 auto;
  padding: 0 var(--spazio);
}

/* Visibile solo agli screen reader: le etichette che servono a chi non vede lo
 * schermo, senza occupare spazio per chi lo vede. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- intestazione */

.intestazione {
  border-bottom: 1px solid var(--bordo);
  padding: 1.1rem 0 0.9rem;
  margin-bottom: 1.5rem;
}

.intestazione__interno {
  max-width: var(--larghezza-massima);
  margin: 0 auto;
  padding: 0 var(--spazio);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.intestazione__stemma { height: 42px; width: auto; display: block; }

.intestazione__nome {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

.intestazione__nome span {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--primario);
}

.navigazione {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.navigazione a {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tenue);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
}

.navigazione a:hover { color: var(--testo-colore); background: var(--superficie); }
.navigazione a[aria-current="page"] { color: var(--sfondo); background: var(--primario); }

/* ------------------------------------------------------------- testata pagina */

.testata { margin-bottom: 1.25rem; }

.testata h1 {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 2.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}

.testata p { margin: 0; color: var(--tenue); font-size: 0.9rem; }

/* ------------------------------------------------------------------ la ricerca */

.ricerca {
  position: relative;
  margin-bottom: 1.1rem;
}

.ricerca input {
  width: 100%;
  font: inherit;
  font-size: 1rem;              /* sotto i 16px Safari ingrandisce la pagina da solo */
  color: var(--testo-colore);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.9rem;
}

.ricerca input::placeholder { color: var(--tenue); }
.ricerca input:focus {
  outline: none;
  border-color: var(--primario);
}

/* --------------------------------------------------------------- la classifica */

.classifica { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }

.riga {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 2.5rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.85rem 0.7rem 0.7rem;
  overflow: hidden;
  /* La transizione serve al riordino: quando la classifica cambia, le righe
   * scivolano invece di saltare (vedi classifica.js). */
  transition: background-color 120ms ease, border-color 120ms ease;
}

.riga:hover { border-color: #3a3a3a; }

/* La barretta d'accento: compare solo su chi si e' mosso davvero. Un accento
 * che c'e' su tutte le righe non segnala piu' niente. */
.riga--sale::before,
.riga--scende::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.riga--sale::before { background: var(--salita); }
.riga--scende::before { background: var(--discesa); }

.riga__posizione {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;   /* le cifre restano incolonnate */
}

/* Le prime tre posizioni si notano appena: nessun podio, nessuna medaglia.
 * Qui il primo posto non e' un traguardo raggiunto ma una posizione da
 * difendere, e fra una settimana potrebbe essere di un altro. */
.riga--podio .riga__posizione { color: var(--primario); }

.riga__iniziali {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: #1c1c1c;
  border: 1px solid var(--bordo);
  display: grid; place-items: center;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--tenue);
  letter-spacing: 0.02em;
}

.riga__nome {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
  /* I cognomi lunghi non devono spingere fuori la variazione. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.riga__sotto {
  font-size: 0.78rem;
  color: var(--tenue);
  margin: 0.1rem 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.riga__variazione {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.riga__variazione--sale { color: var(--salita); }
.riga__variazione--scende { color: var(--discesa); }
.riga__variazione--fermo { color: #3d3d3d; }

.riga[hidden] { display: none; }

/* ------------------------------------------------------------------ il riassunto */

.riassunto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 1rem 0 1.4rem;
  border-top: 1px solid var(--bordo);
  margin-top: 1.4rem;
}

.riassunto div { min-width: 5rem; }

.riassunto dt { font-size: 0.72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.1em; }

.riassunto dd {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.7rem;
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
}

.nessun-risultato {
  padding: 2rem 0;
  text-align: center;
  color: var(--tenue);
}

/* ------------------------------------------------------------------- pie' pagina */

.pie {
  border-top: 1px solid var(--bordo);
  margin-top: 2rem;
  padding: 1.5rem 0 2.5rem;
  font-size: 0.8rem;
  color: var(--tenue);
}

.pie a { color: var(--tenue); }

/* ------------------------------------------------------------- schermi piu' larghi */

@media (min-width: 640px) {
  .riga { grid-template-columns: 3rem 2.75rem 1fr auto; padding: 0.85rem 1rem 0.85rem 0.9rem; }
  .riga__posizione { font-size: 1.9rem; }
  .riga__nome { font-size: 1.3rem; }
}

/* Chi ha chiesto meno animazioni al sistema operativo non deve vederne nessuna. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- le sfide in corso */

.sfide { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.sfida {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
}

.sfida__coppia {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sfida__nome {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.2rem;
  display: block;
  line-height: 1.2;
}

.sfida__ruolo {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tenue);
}

.sfida__posizioni { text-align: right; white-space: nowrap; }

.sfida__numero {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.1;
}

.sfida__era { font-size: 0.72rem; color: var(--tenue); }

/* Il numero in palio sta in mezzo ai due nomi: e' il dato che i soci cercano. */
.sfida__mezzo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.7rem 0;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}

.sfida__palio {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
}

.sfida__palio-etichetta {
  font-size: 0.78rem;
  color: var(--tenue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sfida__quando { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--tenue); }
.sfida__nota { color: var(--primario); }

.spiegazione {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--bordo);
  font-size: 0.85rem;
  color: var(--tenue);
  line-height: 1.6;
}

/* ------------------------------------------------------------ lo storico partite */

.partite { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.partita {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
}

.partita__quando {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tenue);
}

.etichetta {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: #1e1e1e;
  border: 1px solid var(--bordo);
  color: var(--tenue);
  letter-spacing: 0.06em;
}

.etichetta--attenzione { color: var(--discesa); border-color: #4a2a20; }

.partita__coppie { display: grid; gap: 0.15rem; }

.partita__coppia {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
}

.partita__coppia--vince { color: var(--testo-colore); }
.partita__coppia:not(.partita__coppia--vince) { color: var(--tenue); }

.partita__contro {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tenue);
}

.partita__dettagli {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--tenue);
}

.partita__punteggio {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--testo-colore);
  font-variant-numeric: tabular-nums;
}

.partita__fermi { margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--tenue); }

.movimenti {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0.8rem 0 0;
  border-top: 1px solid var(--bordo);
  display: grid;
  gap: 0.3rem;
}

.movimento {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.movimento__salto {
  font-family: var(--titoli);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.movimento--sale .movimento__salto { color: var(--salita); }
.movimento--scende .movimento__salto { color: var(--discesa); }

.movimento__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.movimento__scorso {
  font-size: 0.72rem;
  color: #5c5c5c;
  margin-left: 0.35rem;
}

.movimento__percorso {
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------- pagine di testo */

.testo { max-width: 38rem; }

.testo h2 {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 2rem 0 0.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--bordo);
}

.testo h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.testo p, .testo li { line-height: 1.65; }
.testo ol { padding-left: 1.2rem; }
.testo li { margin-bottom: 0.7rem; }

.testo__nota, .esempio, .testo__avviso {
  border-left: 3px solid var(--bordo);
  padding: 0.7rem 0 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--tenue);
}

.esempio { border-left-color: var(--primario); }
.testo__avviso { border-left-color: var(--discesa); }

.partita__scorsi {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: #5c5c5c;
}

/* ----------------------------------------------------------- la pagina d'ingresso */

.apertura {
  text-align: center;
  padding: 1.5rem 0 2rem;
}

.apertura__logo {
  width: 100%;
  max-width: 19rem;
  height: auto;
}

.apertura__frase {
  margin: 1.2rem auto 0;
  max-width: 26rem;
  color: var(--tenue);
  line-height: 1.6;
}

/* I riquadri sono la struttura della pagina, non una decorazione: il circolo ci
 * aggiungera' orari, campi e contatti senza doverla rifare. */
.riquadri {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  padding-bottom: 1rem;
}

.riquadro {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.1rem;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.riquadro:hover { border-color: var(--primario); }

.riquadro__etichetta {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primario);
}

.riquadro__numero {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.riquadro__dettaglio { font-size: 0.85rem; color: var(--tenue); }
.riquadro__dettaglio--solo { margin-top: 0.4rem; line-height: 1.6; }

.riquadro__primi {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--bordo);
  display: grid;
  gap: 0.35rem;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.05rem;
}

.riquadro__primi span {
  color: var(--primario);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 1.6rem;
}

@media (min-width: 640px) {
  .riquadri { grid-template-columns: 1fr 1fr; }
  .riquadro--principale { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------- area soci */

.navigazione__esci { margin: 0; display: inline; }

.navigazione__esci button {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tenue);
  background: none;
  border: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

.navigazione__esci button:hover { color: var(--testo-colore); background: var(--superficie); }

.riga__nome--collegamento {
  text-decoration: none;
  display: block;
}

.riga__nome--collegamento:hover { color: var(--primario); }

.riga__freccia { color: #3d3d3d; font-size: 1.4rem; line-height: 1; }

.invito {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-size: 0.88rem;
  color: var(--tenue);
  line-height: 1.6;
}

.invito a { color: var(--primario); }

/* ------------------------------------------------------------------- i filtri */

.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.filtri__etichetta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tenue);
  margin-right: 0.3rem;
}

.filtro {
  font: inherit;
  font-size: 0.85rem;
  color: var(--tenue);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.filtro:hover { color: var(--testo-colore); }

.filtro--attivo {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--sfondo);
  font-weight: 600;
}

/* --------------------------------------------------------------- la pagina di accesso */

.accesso {
  max-width: 22rem;
  margin: 2rem auto;
  text-align: center;
}

.accesso__stemma { height: 70px; width: auto; }

.accesso h1 {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 1rem 0 0.3rem;
}

.accesso__sottotitolo { margin: 0 0 1.6rem; color: var(--tenue); font-size: 0.9rem; line-height: 1.6; }
.accesso__nota { margin-top: 1.6rem; font-size: 0.82rem; color: var(--tenue); line-height: 1.6; }

.modulo { display: grid; gap: 0.8rem; text-align: left; }

.campo { display: grid; gap: 0.3rem; }

.campo__etichetta {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tenue);
}

.campo input {
  font: inherit;
  font-size: 1rem;
  color: var(--testo-colore);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.9rem;
  width: 100%;
}

.campo input:focus { outline: none; border-color: var(--primario); }

.bottone {
  display: inline-block;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  color: var(--sfondo);
  background: var(--primario);
  border: 1px solid var(--primario);
  border-radius: var(--raggio);
  padding: 0.75rem 1.2rem;
  cursor: pointer;
}

.bottone--secondario {
  background: none;
  color: var(--primario);
}

.errore {
  background: #2a1410;
  border: 1px solid #4a2a20;
  border-radius: var(--raggio);
  padding: 0.8rem 1rem;
  font-size: 0.85rem;
  color: #f0b4a0;
  text-align: left;
  line-height: 1.55;
}

/* ------------------------------------------------------------ la scheda del socio */

.indietro { margin: 0 0 1rem; font-size: 0.85rem; }
.indietro a { color: var(--tenue); text-decoration: none; }
.indietro a:hover { color: var(--primario); }

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.2rem;
}

.scheda__testa { display: flex; align-items: center; gap: 1rem; }

.scheda__foto, .scheda__iniziali {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.scheda__iniziali {
  background: #1c1c1c;
  border: 1px solid var(--bordo);
  display: grid; place-items: center;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--tenue);
}

.scheda__nome {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  margin: 0;
}

.scheda__soprannome { margin: 0.2rem 0 0; color: var(--primario); font-size: 0.9rem; }

.scheda__numeri {
  display: flex;
  gap: 1.8rem;
  margin: 1.3rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
}

.scheda__numeri dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tenue);
}

.scheda__numeri dd {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
  margin: 0.1rem 0 0;
  font-variant-numeric: tabular-nums;
}

.scheda__numeri dd span { font-size: 1.1rem; color: var(--tenue); }

.scheda__dati { margin: 0 0 1.3rem; display: grid; gap: 0.7rem; }
.scheda__dati div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.6rem; align-items: baseline; }
.scheda__dati dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tenue); }
.scheda__dati dd { margin: 0; }

.scheda__contatto { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.scheda__nota { margin: 0; font-size: 0.85rem; color: var(--tenue); line-height: 1.6; }

.sezione {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 2rem 0 0.8rem;
}

.sfida--compatta { display: grid; gap: 0.2rem; }
.sfida--compatta .sfida__nome { font-size: 1.05rem; }

/* ------------------------------------------------ moduli: spunte, giorni, avvisi */

.modulo--largo { max-width: 32rem; }

.campo__aiuto { font-size: 0.78rem; color: var(--tenue); }

.campo select {
  font: inherit;
  font-size: 1rem;
  color: var(--testo-colore);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.9rem;
  width: 100%;
}

.spunta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

/* Il quadratino di sistema e' minuscolo sul telefono: qui diventa toccabile. */
.spunta input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--primario);
}

.spunta__aiuto { display: block; font-size: 0.78rem; color: var(--tenue); margin-top: 0.2rem; }

.giorni {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.9rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.giorni legend { padding: 0 0.4rem; }

.giorno {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.giorno input { accent-color: var(--primario); margin: 0; }
.giorno:has(input:checked) { border-color: var(--primario); color: var(--testo-colore); }

.avviso {
  border-radius: var(--raggio);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  border: 1px solid var(--bordo);
  background: var(--superficie);
}

.avviso--success { border-color: var(--primario); }
.avviso--error { border-color: var(--discesa); color: #f0b4a0; }

.riquadro--fermo { margin-bottom: 1.6rem; }
.riquadro--fermo:hover { border-color: var(--bordo); }
.riquadro__grado { font-size: 1.3rem; color: var(--tenue); }

.riquadro__nota {
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.78rem;
  color: var(--tenue);
  line-height: 1.55;
}

/* --------------------------------------------------- le richieste da approvare */

.richiesta {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.2rem;
  margin-bottom: 1rem;
}

.richiesta__chi h2 {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
}

.richiesta__email { margin: 0.2rem 0 0; color: var(--primario); font-size: 0.9rem; }
.richiesta__quando { margin: 0.2rem 0 0; color: var(--tenue); font-size: 0.8rem; }

.richiesta__scelta { margin-top: 1.2rem; display: grid; gap: 0.8rem; }

.richiesta__titolo {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tenue);
}

.proposte { display: grid; gap: 0.4rem; }

.proposta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: center;
  background: #161616;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}

.proposta:has(input:checked) { border-color: var(--primario); }
.proposta input { accent-color: var(--primario); margin: 0; }

.proposta__nome { font-family: var(--titoli); font-weight: 600; font-size: 1.1rem; display: block; }
.proposta__dati { font-size: 0.78rem; color: var(--tenue); }

.richiesta__rifiuto { margin-top: 1.2rem; }

.richiesta__rifiuto summary {
  font-size: 0.82rem;
  color: var(--tenue);
  cursor: pointer;
}

.richiesta__rifiuto .modulo { margin-top: 0.8rem; max-width: 26rem; }


/* ------------------------------------------------------- il menu della classifica */

/* Un <details>: si apre e si chiude da solo, senza una riga di JavaScript. Se lo
 * script della pagina non parte, o un socio ha uno di quei browser aziendali che
 * bloccano tutto, il menu funziona lo stesso. */
.menu { position: relative; }

.menu__titolo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tenue);
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.menu__titolo::-webkit-details-marker { display: none; }
.menu__titolo:hover { color: var(--testo-colore); background: var(--superficie); }

.menu[open] > .menu__titolo { color: var(--testo-colore); background: var(--superficie); }

/* Da chiuso, se si e' dentro la sezione, il titolo resta acceso: serve a sapere
 * dove ci si trova senza dover riaprire il menu. */
.menu--qui > .menu__titolo { color: var(--primario); }
.menu__freccia { font-size: 0.7rem; transition: transform 140ms ease; }
.menu[open] .menu__freccia { transform: rotate(180deg); }

.menu__voci {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 20;
  min-width: 13rem;
  display: grid;
  gap: 0.1rem;
  background: #131313;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.35rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.menu__voci a {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tenue);
  padding: 0.45rem 0.65rem;
  border-radius: 7px;
  white-space: nowrap;
}

.menu__voci a:hover { color: var(--testo-colore); background: var(--superficie); }

.menu__voci a[aria-current="page"] {
  color: var(--sfondo);
  background: var(--primario);
}

/* Sul telefono l'intestazione va a capo e il menu a tendina sovrapposto diventa
 * scomodo: le voci si mettono in colonna dentro il flusso della pagina. */
@media (max-width: 720px) {
  .intestazione__interno { flex-wrap: wrap; }

  /* Le voci restano una di fianco all'altra e vanno a capo solo quando lo spazio
   * finisce davvero. Prima il menù prendeva tutta la riga per sé e spingeva le
   * altre voci una sotto l'altra: sul telefono la barra occupava un terzo dello
   * schermo prima ancora di arrivare alla classifica. */
  .navigazione {
    width: 100%;
    margin-left: 0;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    gap: 0.2rem 0.1rem;
  }

  .navigazione a,
  .navigazione__esci button,
  .menu__titolo {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.45rem;
  }

  /* Il menù resta a tendina e si apre sopra la pagina: aperto a fisarmonica
   * spingerebbe giù la classifica ogni volta che lo si tocca. */
  .menu__voci {
    left: 0;
    right: auto;
    min-width: 12rem;
    max-width: calc(100vw - 1.5rem);
  }
}

/* -------------------------------------------- chi non e' ancora in classifica */

.attesa {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--bordo);
}

.attesa__titolo {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
  margin: 0;
}

.attesa__nota {
  margin: 0.3rem 0 0.9rem;
  font-size: 0.82rem;
  color: var(--tenue);
  line-height: 1.6;
  max-width: 34rem;
}

/* Hanno tutti lo stesso numero, che senza un segnale sembrerebbe un errore del
 * programma: il numero e' tenue e il riquadro appena piu' spento. */
.riga--aspetta { background: #0c0c0c; }
.riga--aspetta .riga__posizione { color: var(--tenue); font-weight: 600; }
.riga--aspetta .riga__iniziali { background: #141414; }

/* ----------------------------------------------------------- il pannello di gestione */

.azioni { display: grid; gap: 0.75rem; margin-bottom: 1.6rem; }

.azione {
  display: grid;
  gap: 0.2rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1.1rem;
  text-decoration: none;
  transition: border-color 140ms ease;
}

.azione:hover { border-color: var(--primario); }

.azione--principale { border-color: #3a3f10; background: #14170a; }

.azione__titolo {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.azione--principale .azione__titolo { color: var(--primario); }
.azione__nota { font-size: 0.85rem; color: var(--tenue); line-height: 1.5; }

.sfida--gestione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
}

.sfida__pulsanti { display: flex; gap: 0.5rem; align-items: center; }
.sfida__pulsanti form { margin: 0; }

.bottone--piccolo {
  font-size: 0.82rem;
  padding: 0.45rem 0.8rem;
  letter-spacing: 0.05em;
}

.scaduta { color: var(--discesa); }
.quasi-scaduta { color: #d8a43a; }

/* ----------------------------------------------- il controllo live e l'anteprima */

.controllo:empty, .anteprima:empty { display: none; }

.controllo__esito, .anteprima__riquadro, .anteprima__errori {
  border-radius: var(--raggio);
  padding: 1rem 1.1rem;
  border: 1px solid var(--bordo);
  background: #0e0e0e;
}

.controllo__esito--valido { border-color: #3a3f10; }
.controllo__esito--errore, .anteprima__errori { border-color: #4a2a20; background: #17100e; }
.controllo__esito--errore p, .anteprima__errori p { margin: 0 0 0.5rem; color: #f0b4a0; font-size: 0.88rem; }

.controllo__coppia { margin: 0 0 0.6rem; font-size: 1.05rem; }

.controllo__palio { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }

.controllo__numero {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
}

.controllo__nota, .anteprima__attesa {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--tenue);
  line-height: 1.55;
}

.anteprima__attesa { padding: 0.7rem 0; }

.anteprima__titolo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.9rem;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.anteprima__palio {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--primario);
}

.anteprima__riquadro .movimenti { margin-top: 0; padding-top: 0; border-top: 0; }

.anteprima__scorsi {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.8rem;
  color: var(--tenue);
  line-height: 1.6;
}

.anteprima__avviso {
  margin: 0 0 0.8rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #d8a43a;
  background: #15120a;
  font-size: 0.85rem;
  color: #e0c98a;
  line-height: 1.55;
}

.spunta--forza { margin-top: 0.8rem; }

/* --------------------------------------------------------- scelte e punteggio */

.scelta, .punteggio {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.9rem;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

.scelta legend, .punteggio legend { padding: 0 0.4rem; }

.scelta__voce { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.scelta__voce input { accent-color: var(--primario); margin: 0; }

.punteggio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }

.punteggio__set { display: inline-flex; align-items: center; gap: 0.3rem; }

.punteggio__set input {
  width: 3rem;
  font: inherit;
  font-size: 1rem;
  text-align: center;
  color: var(--testo-colore);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 0.5rem 0.3rem;
}

.punteggio__set input:focus { outline: none; border-color: var(--primario); }
.punteggio .campo__aiuto { flex-basis: 100%; }

.anteprima__frenato {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--bordo);
  font-size: 0.8rem;
  color: var(--tenue);
  line-height: 1.55;
}

/* --------------------------------------------- scelta di un giocatore digitando */

.cerca { position: relative; }

.cerca__campo {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--testo-colore);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.7rem 0.9rem;
}

.cerca__campo:focus { outline: none; border-color: var(--primario); }
.cerca__campo::placeholder { color: var(--tenue); }

/* Il select resta nel modulo e continua a portare il valore: e' lui che viene
 * inviato, e se lo script non parte torna visibile da solo. */
.cerca__nascosto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.cerca__lista {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.3rem);
  left: 0; right: 0;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #131313;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6);
  max-height: 17rem;
  overflow-y: auto;
}

.cerca__voce {
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.95rem;
}

.cerca__voce:hover, .cerca__voce--su { background: var(--superficie); }
.cerca__vuoto { padding: 0.6rem 0.65rem; color: var(--tenue); font-size: 0.88rem; }

.azione--attesa { border-color: #4a3a10; background: #16130a; }

.azione__quante {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background: var(--primario);
  color: var(--sfondo);
  font-size: 0.9rem;
  vertical-align: middle;
}

/* ------------------------------------------------- inserimento rapido dei giocatori */

.inserimento { display: grid; gap: 1.2rem; align-items: start; }

.coppia { display: grid; gap: 0.8rem; }

.inseriti {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem;
}

.inseriti__titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.8rem;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.inseriti__quanti {
  font-size: 1.5rem;
  color: var(--primario);
  font-variant-numeric: tabular-nums;
}

.inseriti__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 20rem;
  overflow-y: auto;
  display: grid;
  gap: 0.3rem;
}

.inseriti__elenco li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px solid #191919;
  font-size: 0.9rem;
}

.inseriti__dato { color: var(--tenue); font-size: 0.78rem; white-space: nowrap; }

.inseriti__vuoto, .inseriti__nota {
  font-size: 0.8rem;
  color: var(--tenue);
  line-height: 1.55;
  margin: 0.6rem 0 0;
}

.inseriti__svuota {
  margin-top: 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--tenue);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.inseriti__conti {
  display: flex;
  gap: 1.4rem;
  margin: 1.1rem 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordo);
}

.inseriti__conti dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--tenue); }
.inseriti__conti dd { margin: 0.1rem 0 0; font-family: var(--titoli); font-weight: 700; font-size: 1.5rem; }

@media (min-width: 820px) {
  .inserimento { grid-template-columns: 1fr 17rem; }
  .coppia { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ il riordino dell'elenco */

.ordina { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.3rem; }

.ordina__riga {
  display: grid;
  grid-template-columns: 1.4rem 2.6rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  cursor: grab;
}

.ordina__riga--presa { opacity: 0.4; cursor: grabbing; }
.ordina__riga--mossa { border-color: var(--primario); }

.ordina__presa { color: #444; font-size: 1.1rem; line-height: 1; }

.ordina__posizione {
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 1.25rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ordina__nome { font-family: var(--titoli); font-weight: 600; font-size: 1.05rem; }
.ordina__dato { font-family: var(--testo); font-weight: 400; font-size: 0.75rem; color: var(--tenue); margin-left: 0.4rem; }

.ordina__frecce { display: flex; gap: 0.2rem; }

.ordina__freccia {
  font: inherit;
  font-size: 0.7rem;
  line-height: 1;
  color: var(--tenue);
  background: #181818;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

.ordina__freccia:hover { color: var(--testo-colore); border-color: var(--primario); }

.pari-merito {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pari-merito li {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.88rem;
}

.pulsanti { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.bottone--grande { font-size: 1.1rem; padding: 0.9rem 1.5rem; }

.riordina-tutto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
}

.riordina-tutto strong { display: block; font-size: 0.95rem; }
.riordina-tutto span { font-size: 0.8rem; color: var(--tenue); }

/* Il pannello tecnico di Django: staccato dal resto, perche' non e' una pagina
 * del sito e la usa una persona sola. */
.navigazione__admin {
  margin-left: 0.5rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--bordo);
  color: #6a6a6a !important;
  font-size: 0.85rem !important;
}

/* ------------------------------------------------------- il campo della foto */

.foto-campo {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 1.4rem;
}

.foto-campo__anteprima {
  position: relative;
  width: 6rem; height: 6rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #1c1c1c;
  border: 2px solid var(--bordo);
}

.foto-campo__anteprima img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.foto-campo__iniziali {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: 2rem;
  color: var(--tenue);
}

.foto-campo__comandi { flex: 1; min-width: 0; }

/* L'input file di serie non si puo' vestire, e quello nudo ("Scegli file /
   Nessun file selezionato") non si capisce che riguarda la foto. Sta dentro la
   label, nascosto: il clic sull'etichetta lo apre lo stesso. */
.foto-campo__scegli {
  display: inline-block;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.foto-campo__scegli input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* La tastiera deve far vedere dove si trova: senza contorno il fuoco sull'input
   nascosto non si vedrebbe da nessuna parte. */
.foto-campo__scegli:focus-within {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.spunta--piccola { font-size: 0.85rem; margin-top: 0.4rem; }

/* ------------------------------------------- l'elenco dei giocatori, in gestione */

.cerca {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

.cerca .campo { margin: 0; flex: 1; min-width: 12rem; }
.cerca__azzera { color: var(--tenue); font-size: 0.9rem; }

.gente { list-style: none; margin: 0; padding: 0; }

.gente__riga + .gente__riga { border-top: 1px solid var(--bordo); }

.gente__collegamento {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.4rem;
  text-decoration: none;
  color: inherit;
}

.gente__collegamento:hover { background: var(--superficie); }

.gente__faccia {
  position: relative;
  width: 3rem; height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #1c1c1c;
  border: 1px solid var(--bordo);
}

.gente__faccia img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gente__iniziali {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--titoli);
  font-weight: 700;
  color: var(--tenue);
}

.gente__chi { flex: 1; min-width: 0; }
.gente__nome { display: block; font-weight: 600; }
.gente__dati { display: block; font-size: 0.85rem; color: var(--tenue); }

/* Non e' un errore, e' il lavoro da fare: giallo e non rosso. */
.gente__manca {
  flex-shrink: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #d9a441;
  border: 1px solid #d9a441;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.dettagli { margin: 0.4rem 0 1rem; }
.dettagli summary { cursor: pointer; color: var(--tenue); font-size: 0.9rem; }
.dettagli[open] summary { margin-bottom: 0.8rem; }

/* La faccia in classifica sta esattamente dov'erano le iniziali: la riga non si
   muove fra chi ha la foto e chi no. */
.riga__faccia {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--bordo);
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------ il ritaglio della foto */

.ritaglio {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo-colore);
  padding: 0;
  max-width: min(92vw, 26rem);
}

.ritaglio::backdrop { background: rgba(0, 0, 0, 0.75); }

.ritaglio__contenuto { padding: 1.3rem; }

.ritaglio__titolo {
  margin: 0 0 0.4rem;
  font-family: var(--titoli);
  font-size: 1.4rem;
}

.ritaglio__aiuto { margin: 0 0 1rem; font-size: 0.85rem; color: var(--tenue); }

.ritaglio__area {
  position: relative;
  width: min(72vw, 18rem);
  aspect-ratio: 1;
  margin: 0 auto;
  background: #000;
  border-radius: var(--raggio);
  overflow: hidden;
}

.ritaglio__tela {
  display: block;
  width: 100%; height: 100%;
  cursor: grab;
  /* Senza questo, trascinare sul telefono fa scorrere la pagina invece di
     spostare la foto, e il ritaglio è inutilizzabile proprio dove serve. */
  touch-action: none;
}

.ritaglio__tela:active { cursor: grabbing; }

/* Il cerchio non ritaglia niente: il file salvato è quadrato, e sono le pagine
   ad arrotondarlo. Serve a far vedere cosa resterà dentro il tondo. */
.ritaglio__maschera {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.55);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
  mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
}

.ritaglio__zoom { display: block; margin: 1rem 0 1.2rem; }

.ritaglio__zoom-etichetta {
  display: block;
  font-size: 0.8rem;
  color: var(--tenue);
  margin-bottom: 0.3rem;
}

.ritaglio__zoom input { width: 100%; accent-color: var(--primario); }

.ritaglio__pulsanti { display: flex; gap: 0.7rem; justify-content: flex-end; }

/* ------------------------------------------------------------- i propri dati */

.miei-dati {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--bordo);
}

.miei-dati__voce { display: grid; gap: 0.5rem; justify-items: start; }

.miei-dati__cancella { margin-top: 1.6rem; }

.miei-dati__cancella summary {
  cursor: pointer;
  color: var(--tenue);
  font-size: 0.9rem;
}

.miei-dati__cancella[open] summary { margin-bottom: 0.8rem; color: var(--discesa); }

/* Rosso, e solo qui: se ogni pulsante importante fosse rosso, quello che
   cancella davvero non si distinguerebbe da quelli che salvano. */
.bottone--pericolo {
  background: var(--discesa);
  color: #fff;
  border-color: var(--discesa);
}

.bottone--pericolo:hover { filter: brightness(1.1); }

/* ----------------------------------------------------- il registro delle partite */

.registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.registro__voce {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.9rem 1rem;
}

.registro__testa { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.registro__data { font-size: 0.8rem; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.05em; }

.registro__segno {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d9a441;
  border: 1px solid #d9a441;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

.registro__partita { margin: 0.35rem 0 0; }
.registro__punteggio { margin-left: 0.4rem; color: var(--primario); font-variant-numeric: tabular-nums; }

.registro__azioni { display: flex; gap: 0.5rem; margin-top: 0.7rem; }

/* Barrata ma leggibile: deve restare chiaro cosa era stato registrato. */
.registro__voce--annullata { opacity: 0.6; }
.registro__voce--annullata .registro__partita { text-decoration: line-through; }
.registro__nota { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--tenue); }

.bottone--piccolo { padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* ------------------------------------------------------------- il circolo, in home */

.circolo { margin-top: 2.2rem; }

.circolo__foto {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
  margin-bottom: 1rem;
}

.circolo__riquadri {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.circolo__riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem 1.1rem;
}

.circolo__riquadro p { margin: 0.4rem 0 0; }

/* ------------------------------------------------- l'anteprima dell'importazione */

.anteprima-elenco { margin: 0.6rem 0 1.4rem; padding-left: 2.2rem; }
.anteprima-elenco li { padding: 0.3rem 0; border-bottom: 1px solid var(--bordo); }
.anteprima-elenco__nome { font-weight: 600; }
.anteprima-elenco__dati { margin-left: 0.5rem; font-size: 0.85rem; color: var(--tenue); }

/* La password provvisoria, da dettare al telefono: grande e senza ambiguità. */
.password-provvisoria {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  color: var(--primario);
  margin: 0.2rem 0 1rem;
  user-select: all;
}