/* ============================================
   PLAYMO - Stile condiviso
   Tema scuro/viola, coerente con il logo.
   Mobile-first: si progetta prima per schermi
   piccoli, poi si allarga per schermi grandi.
   ============================================ */

/* Font "Baloo 2" servito dal sito stesso (cartella fonts/) invece che dai
   server di Google: cosi' i visitatori non inviano il loro indirizzo IP a
   Google (privacy/GDPR). E' un font variabile: un file copre i pesi 600-800. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('../fonts/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --colore-primario: #8a2ed4;          /* viola principale del logo */
  --colore-primario-scuro: #62239e;    /* viola scuro (hover, gradienti) */
  --colore-primario-chiaro: #c24dff;   /* viola chiaro (accenti, glow, link su sfondo scuro) */
  --colore-bottone-inizio: #9d39d6;    /* inizio del gradiente di bottoni/chat/banner: testo bianco 5,3:1 (il viola chiaro dava 3,6:1) */
  --colore-bordo-campo: #6b6794;       /* bordo dei campi di testo: 3,1:1 sullo sfondo del campo (prima 1,3:1) */
  --colore-badge: #d92d3a;             /* pallino rosso delle notifiche: testo bianco 4,8:1 */
  --colore-palla: #d6f23d;             /* giallo-verde pallina da padel: SOLO per i posti liberi (13:1 sullo sfondo delle schede) */
  --colore-sfondo: #101021;            /* sfondo pagina, blu-nero */
  --colore-superficie: #17152b;        /* sfondo schede/card */
  --colore-superficie-alt: #1f1d38;    /* sfondo campi input */
  --colore-bordo: #322e50;
  --colore-testo: #f1f0f7;
  --colore-testo-chiaro: #a6a3be;      /* testo secondario/etichette piccole */
  --colore-errore: #ff8080;
  --colore-errore-sfondo: #3a1620;
  --colore-successo: #4ade80;
  --colore-successo-sfondo: #123423;
  --raggio: 12px;
  --ombra: 0 8px 30px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  line-height: 1.5;
}

/* Le caselle nativi (checkbox/radio) prendono il colore del brand */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--colore-primario);
}

.contenitore {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px;
}

/* Intestazione app (pagine pubbliche: login/registrazione) */
.intestazione-pubblica {
  text-align: center;
  padding: 36px 16px 20px;
}

.logo-simbolo {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.logo-scritta {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-weight: 700;
  font-size: 30px;
  margin: 0 0 4px;
  letter-spacing: 0.5px;
}

.logo-scritta .parte-play {
  color: var(--colore-testo);
}

.logo-scritta .parte-mo {
  background: linear-gradient(135deg, var(--colore-primario-chiaro), var(--colore-primario));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intestazione-pubblica p {
  color: var(--colore-testo-chiaro);
  margin: 0;
}

/* Navigazione (pagine private): barra alta sottile con il logo + menu a 5 icone in basso.
   Il menu in basso sta dove arriva il pollice; "Esci" e l'area admin sono dentro Profilo. */
.barra-alta {
  background: var(--colore-superficie);
  border-bottom: 1px solid var(--colore-bordo);
  padding: 4px 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.barra-alta .logo-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-height: 44px;
}

.barra-alta .logo-nav img {
  width: 30px;
  height: auto;
  display: block;
}

.barra-alta .logo-nav .logo-scritta {
  font-size: 22px;
  margin: 0;
}

/* Solo pagine admin: scorciatoie tra le sezioni, sotto la barra alta */
.sottomenu-admin {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 16px;
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
  scrollbar-width: none;
}

.sottomenu-admin::-webkit-scrollbar {
  display: none;
}

.sottomenu-admin .chip {
  text-decoration: none;
  white-space: nowrap;
}

/* Spazio in fondo alla pagina perché il menu fisso non copra il contenuto */
body.con-tabbar {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 68px;
  padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  background: var(--colore-superficie);
  border-top: 1px solid var(--colore-bordo);
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  color: var(--colore-testo-chiaro);
  font-size: 12px;
  text-decoration: none;
}

.tab .icona {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.tab.attiva {
  color: #fff;
  font-weight: 600;
}

.tab.attiva .icona {
  background: rgba(138, 46, 212, 0.38);
}

.tab .pallino {
  position: absolute;
  top: 0;
  left: calc(50% + 6px);
  background: var(--colore-badge);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* Il banner "Installa app"/"Attiva notifiche" sta sopra il menu, non sopra le sue icone */
body.con-tabbar .banner-installa-app {
  bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Schermi larghi: il menu resta una colonna come il contenuto */
@media (min-width: 600px) {
  .tabbar {
    left: 50%;
    right: auto;
    width: 480px;
    transform: translateX(-50%);
    border: 1px solid var(--colore-bordo);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
  }
}

/* Card generica */
.scheda {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 20px;
  margin-bottom: 16px;
}

.scheda h2 {
  margin-top: 0;
}

/* Titolo principale delle pagine pubbliche (h1): stesso aspetto che aveva come h2 */
.scheda h1 {
  margin-top: 0;
  margin-bottom: 0.83em;
  font-size: 1.5em;
}

/* Form */
.campo-form {
  margin-bottom: 16px;
}

.campo-form label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--colore-testo);
}

.campo-form input,
.campo-form select,
.campo-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  font-size: 16px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-family: inherit;
}

.campo-form input::placeholder,
.campo-form textarea::placeholder {
  color: var(--colore-testo-chiaro);
}

.campo-form input:disabled,
.campo-form select:disabled {
  opacity: 0.6;
}

.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus {
  outline: none;
  border-color: var(--colore-primario);
  box-shadow: 0 0 0 3px rgba(138, 46, 212, 0.25);
}

/* Data di nascita: tre menu a tendina (giorno/mese/anno) invece del
   calendario nativo del browser, che non si può ristilizzare del
   tutto (il popup resta quello di sistema, chiaro su sfondo chiaro). */
.scelta-data-nascita {
  display: flex;
  gap: 8px;
}

.scelta-data-nascita select {
  flex: 1;
  min-width: 0;
}

.campo-form small {
  display: block;
  color: var(--colore-testo-chiaro);
  font-size: 12px;
  margin-top: 4px;
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}

/* Caselle e pallini di scelta: 22px (prima 13px) e riga alta almeno 44px,
   con tutta la riga cliccabile (etichetta compresa) */
.campo-checkbox input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 10px 0 0;
}

.campo-checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: var(--colore-testo);
  padding: 10px 0;
}

/* Elenco di caselle da spuntare (es. zone multiple) */
.elenco-checkbox {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.elenco-checkbox .voce-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}

.elenco-checkbox .voce-checkbox input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.elenco-checkbox .voce-checkbox label {
  flex: 1;
  font-size: 15px;
  font-weight: 400;
  color: var(--colore-testo);
  padding: 11px 0;
  margin-bottom: 0;
}

/* Bottoni */
.bottone {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--colore-bottone-inizio), var(--colore-primario-scuro));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

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

.bottone:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bottone-secondario {
  background: transparent;
  color: var(--colore-primario-chiaro);
  border: 1px solid var(--colore-primario);
}

.bottone-secondario:hover {
  background: rgba(138, 46, 212, 0.12);
}

.bottone-piccolo {
  width: auto;
  padding: 10px 16px;
  min-height: 40px;
  font-size: 14px;
}

/* Pulsante che si presenta come link (es. "Guida ai livelli"): area di tocco alta 44px */
.bottone-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colore-primario-chiaro);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 0 4px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bottone-link:hover {
  text-decoration: underline;
}

.icona-info {
  flex: 0 0 auto;
}

/* Pulsante "ⓘ" di spiegazione (js/info.js): icona piccola, ma area di tocco 40px.
   I margini negativi evitano che allarghi la riga del titolo in cui sta. */
.bottone-info {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colore-primario-chiaro);
  width: 40px;
  height: 40px;
  margin: -10px -8px -10px -4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  flex: 0 0 auto;
}

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

/* Più pulsanti piccoli affiancati che vanno a capo se non c'è spazio (es. proposte nella partita) */
.riga-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Etichetta di un campo con accanto il pulsante "ⓘ" */
.etichetta-con-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.etichetta-con-info label {
  margin-bottom: 0;
}

/* Finestra della spiegazione */
.titolo-info {
  margin-top: 0;
  font-size: 1.17em;
}

.testo-info p,
.testo-info li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--colore-testo);
}

.testo-info p {
  margin: 0 0 10px;
}

.testo-info ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

.testo-info li {
  margin-bottom: 6px;
}

/* Messaggi di stato */
.messaggio {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.messaggio-errore {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
}

.messaggio-successo {
  background: var(--colore-successo-sfondo);
  color: var(--colore-successo);
}

/* Link di testo */
.link-testo {
  color: var(--colore-primario-chiaro);
  text-decoration: none;
  font-weight: 600;
}

.link-testo:hover {
  text-decoration: underline;
}

.testo-centrato {
  text-align: center;
}

/* Link da soli su una riga (es. "Password dimenticata?"): area di tocco più comoda */
.testo-centrato .link-testo {
  display: inline-block;
  padding: 10px 6px;
}

.testo-piccolo {
  font-size: 13px;
  color: var(--colore-testo-chiaro);
}

.spazio-sopra {
  margin-top: 16px;
}

/* Partite: filtri, schede elenco, badge di stato */
.filtri-ricerca {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.filtri-ricerca select,
.filtri-ricerca input {
  flex: 1 1 130px;
  padding: 9px 10px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-size: 14px;
  font-family: inherit;
}

.filtri-ricerca button {
  flex: 0 0 auto;
  width: auto;
}

.intestazione-flessibile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.intestazione-flessibile h2 {
  margin: 0;
}

.scheda-partita {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.scheda-partita:hover {
  border-color: var(--colore-primario);
}

.notifica {
  cursor: pointer;
}

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

.notifica-non-letta {
  border-color: var(--colore-primario);
  background: linear-gradient(180deg, rgba(138, 46, 212, 0.12), var(--colore-superficie));
}

.scheda-partita-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-aperta {
  background: var(--colore-successo-sfondo);
  color: var(--colore-successo);
}

.badge-completa {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.badge-conclusa {
  background: rgba(166, 163, 190, 0.15);
  color: var(--colore-testo-chiaro);
}

.badge-annullata {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
}

.badge-privata {
  background: rgba(138, 46, 212, 0.18);
  color: var(--colore-primario-chiaro);
}

/* ---- Titolo di pagina senza scheda + filtri a "chip" (lista partite) ---- */
.testata-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 12px;
}

.testata-pagina h2 {
  margin: 0;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 28px;
}

/* I filtri stanno in due righe da due: si vedono tutti senza scorrere di lato */
.filtri-chip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 4px;
  padding: 2px 0 4px;
}

.filtri-chip .chip {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* Sotto i filtri: la nota sul livello e il pulsante "Azzera filtri" */
.riga-azzera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

.riga-azzera .testo-piccolo {
  margin: 0;
}

.riga-azzera .bottone-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  color: var(--colore-testo);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  width: auto;
}

select.chip {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6a3be' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.chip.attivo {
  border-color: var(--colore-primario-chiaro);
  background-color: rgba(138, 46, 212, 0.25);
}

/* Titoletto di un giorno nella lista partite ("Oggi", "Domani", "Sab 2 nov") */
.titolo-giorno {
  margin: 18px 2px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--colore-testo-chiaro);
}

#bottone-altre {
  margin-bottom: 8px;
}

/* ---- Scheda partita "a pallini" (revisione del 30 ott 2026) ----
   Padel = 4 giocatori: 4 pallini. Pieno = c'è già qualcuno; tratteggiato giallo-verde
   (il colore della pallina) = posto libero. Il giallo-verde si usa SOLO qui, così
   l'occhio va subito dove si può entrare. */
.partita {
  display: block;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  color: inherit;
  text-decoration: none;
}

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

.partita-chiusa {
  opacity: 0.92;
}

/* Su una partita chiusa un pallino vuoto non è "un posto libero": colore neutro */
.partita-chiusa .slot.vuoto {
  border-color: var(--colore-bordo-campo);
  color: var(--colore-testo-chiaro);
}

.p-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.p-giorno {
  font-size: 13px;
  font-weight: 600;
  color: var(--colore-testo-chiaro);
}

.p-corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 6px;
}

.p-ora {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0.5px;
}

.posti {
  display: flex;
  gap: 5px;
}

.slot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.slot.pieno {
  background: linear-gradient(135deg, var(--colore-bottone-inizio), var(--colore-primario-scuro));
  color: #fff;
}

.slot.vuoto {
  border: 2px dashed var(--colore-palla);
  color: var(--colore-palla);
  font-size: 18px;
  font-weight: 600;
}

.p-luogo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.p-luogo svg {
  flex: 0 0 auto;
  color: var(--colore-testo-chiaro);
}

.p-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--colore-bordo);
}

.pill {
  display: inline-block;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 13px;
}

.pill-nota {
  border-color: var(--colore-primario);
  color: var(--colore-primario-chiaro);
}

.libero {
  font-size: 13px;
  font-weight: 700;
  color: var(--colore-palla);
  margin-left: auto;
}

.libero.tutti {
  color: var(--colore-testo-chiaro);
  font-weight: 600;
}

.lista-semplice {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}

.lista-semplice li {
  padding: 8px 0;
  border-bottom: 1px solid var(--colore-bordo);
  font-size: 14px;
}

.lista-semplice li:last-child {
  border-bottom: none;
}

/* Chat della partita */
.chat-messaggi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 2px;
  margin-bottom: 12px;
}

.chat-messaggio {
  background: var(--colore-superficie-alt);
  border-radius: var(--raggio);
  padding: 8px 12px;
  max-width: 80%;
  align-self: flex-start;
}

.chat-messaggio.chat-mio {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--colore-bottone-inizio), var(--colore-primario-scuro));
}

.chat-autore {
  font-size: 12px;
  font-weight: 700;
  color: var(--colore-testo-chiaro);
  margin-bottom: 2px;
}

.chat-mio .chat-autore {
  color: #fff;
}

.chat-testo {
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-ora {
  font-size: 12px;
  color: var(--colore-testo-chiaro);
  margin-top: 3px;
  text-align: right;
}

.chat-mio .chat-ora {
  color: rgba(255, 255, 255, 0.92);
}

.chat-form {
  display: flex;
  gap: 8px;
}

.chat-form input {
  flex: 1 1 auto;
  padding: 10px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-size: 14px;
  font-family: inherit;
}

.chat-form button {
  flex: 0 0 auto;
  width: auto;
}

/* Nome partecipante cliccabile e riquadro dettaglio */
.link-partecipante {
  background: none;
  border: none;
  color: var(--colore-primario-chiaro);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 8px 2px;
}

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

.overlay-modale {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

/* Se il contenuto è più alto dello schermo, la finestra scorre invece di tagliarsi in alto */
.contenuto-modale {
  max-width: 380px;
  width: 100%;
  margin-bottom: 0;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.contenuto-modale:focus {
  outline: none;
}

/* Pannello Admin: righe elenco e form di aggiunta */
.form-aggiungi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--colore-bordo);
}

.form-aggiungi input[type="text"],
.form-aggiungi select {
  flex: 1 1 140px;
  padding: 10px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-size: 14px;
  font-family: inherit;
}

.form-aggiungi button {
  flex: 0 0 auto;
  width: auto;
}

.riga-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--colore-bordo);
}

.riga-admin:last-child {
  border-bottom: none;
}

.riga-admin.riga-inattiva {
  opacity: 0.5;
}

.riga-admin input[type="text"],
.riga-admin select {
  flex: 1 1 140px;
  padding: 8px 10px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-size: 14px;
  font-family: inherit;
}

.riga-admin-attivo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--colore-testo-chiaro);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Pagina "Installa l'app" (guida iOS passo-passo) */
.passo-installazione {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.passo-numero {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--colore-primario);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: "Baloo 2", sans-serif;
}

.illustrazione-passo {
  width: 100%;
  height: auto;
  margin-top: 10px;
  border-radius: var(--raggio);
}

/* Banner "Installa app" (PWA), mostrato in basso, fisso — colori
   invertiti rispetto al resto del sito (sfondo a gradiente viola
   pieno, non lo sfondo scuro delle schede) apposta per saltare
   all'occhio invece di mimetizzarsi con il resto della pagina. */
.banner-installa-app {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--colore-bottone-inizio), var(--colore-primario-scuro));
  border: none;
  border-radius: var(--raggio);
  box-shadow: 0 8px 30px rgba(138, 46, 212, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: banner-installa-comparsa 0.35s ease-out, banner-installa-pulsa 2.4s ease-in-out 0.35s 3;
}

@keyframes banner-installa-comparsa {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes banner-installa-pulsa {
  0%, 100% {
    box-shadow: 0 8px 30px rgba(138, 46, 212, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }
  50% {
    box-shadow: 0 8px 40px rgba(194, 77, 255, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  }
}

.banner-installa-app-icona {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Su telefono il testo ha tutta la larghezza e i pulsanti vanno sotto, a destra */
.banner-installa-app {
  flex-wrap: wrap;
}

.banner-installa-app-azioni {
  margin-left: auto;
}

.banner-installa-app p {
  margin: 0;
  flex: 1 1 200px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.banner-installa-app p a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

.banner-installa-app-azioni {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.banner-installa-app-azioni .bottone {
  background: #fff;
  color: var(--colore-primario-scuro);
  width: auto;
}

/* Pulsante ✕: area di tocco ~44px, senza ingrandire il banner (margini negativi) */
.banner-installa-app-chiudi {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 13px 14px;
  margin: -10px -8px -10px 0;
  line-height: 1;
}

/* Schermi larghi: un po' più di respiro */
@media (min-width: 600px) {
  .contenitore {
    padding: 32px 16px;
  }

  .banner-installa-app {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ============================================
   Accessibilità (revisione del 30 ott 2026)
   ============================================ */

/* Bordo dei campi di testo più visibile (WCAG 1.4.11: almeno 3:1). Resta sotto
   la regola :focus dei campi, che colora il bordo di viola quando sono attivi. */
.campo-form input,
.campo-form select,
.campo-form textarea,
.filtri-ricerca select,
.filtri-ricerca input,
.chat-form input,
.form-aggiungi input[type="text"],
.form-aggiungi select,
.riga-admin input[type="text"],
.riga-admin select {
  border-color: var(--colore-bordo-campo);
}

/* Indicatore di focus ben visibile per chi naviga con la tastiera */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--colore-primario-chiaro);
  outline-offset: 2px;
}

.banner-installa-app :focus-visible {
  outline-color: #fff;
}

/* Chi ha attivato "riduci animazioni" nel telefono non vede più il pulsare del banner */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Testi lunghi (es. informativa privacy): più grandi e a piena luminosità */
.scheda-documento p,
.scheda-documento li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--colore-testo);
}

.scheda-documento li {
  margin-bottom: 8px;
}

.scheda-documento ul {
  padding-left: 20px;
}

.scheda-documento h3 {
  font-size: 17px;
  margin: 26px 0 8px;
}

.scheda-documento p.nota-data {
  font-size: 13px;
  color: var(--colore-testo-chiaro);
}

/* ============================================
   Registrazione in 3 passi (30 ott 2026)
   ============================================ */

/* L'attributo hidden deve vincere anche sulle classi che impostano "display" (es. .bottone) */
[hidden] {
  display: none !important;
}

.passi-testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 6px;
}

.titolo-passo {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.titolo-passo:focus {
  outline: none;
}

.conta-passi {
  font-size: 13px;
  color: var(--colore-testo-chiaro);
}

.barra-prog {
  height: 6px;
  background: var(--colore-superficie-alt);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}

.barra-prog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--colore-bottone-inizio), var(--colore-primario-chiaro));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Errore attaccato al campo sbagliato (non più in cima alla pagina) */
.errore-campo {
  color: var(--colore-errore);
  font-size: 13px;
  font-weight: 600;
  margin: 6px 0 0;
}

.campo-form input[aria-invalid="true"],
.campo-form select[aria-invalid="true"],
.seg[aria-invalid="true"] .seg-voce,
.scelta-data-nascita[aria-invalid="true"] select {
  border-color: var(--colore-errore);
}

/* Campo nascosto alla vista ma raggiungibile da tastiera e screen reader (radio/checkbox "a pulsante") */
.nascosto-visivo,
.campo-form input.nascosto-visivo {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* Sesso: due pulsanti grandi M / F */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
}

.campo-form .seg-voce {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.seg input:checked + .seg-voce {
  border-color: var(--colore-primario-chiaro);
  background: rgba(138, 46, 212, 0.28);
}

.seg input:focus-visible + .seg-voce,
.zone-chip input:focus-visible + .zona-chip {
  outline: 2px solid var(--colore-primario-chiaro);
  outline-offset: 2px;
}

/* Zone: "chip" grandi da toccare */
.zone-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}

.campo-form .zona-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.zona-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--colore-bordo-campo);
  border-radius: 50%;
}

.zone-chip input:checked + .zona-chip {
  border-color: var(--colore-primario-chiaro);
  background: rgba(138, 46, 212, 0.28);
}

.zone-chip input:checked + .zona-chip::before {
  border-color: var(--colore-primario-chiaro);
  background: var(--colore-primario-chiaro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101021' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* Password con occhio per mostrarla */
.campo-password {
  position: relative;
}

.campo-password input {
  padding-right: 52px;
}

.occhio {
  position: absolute;
  top: 0;
  right: 2px;
  width: 48px;
  height: 100%;
  min-height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--colore-testo-chiaro);
  cursor: pointer;
}

/* Livello: numero grande, nome della fascia e descrizione che cambiano con la barra */
.livello-box {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 14px;
  padding: 12px 14px;
}

.livello-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.livello-testa {
  flex: 1;
  text-align: center;
}

.livello-num {
  display: block;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
}

.livello-nome {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--colore-primario-chiaro);
}

.livello-pm {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo-campo);
  color: var(--colore-testo);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.livello-desc {
  min-height: 58px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--colore-testo-chiaro);
}

.livello-box input[type="range"] {
  width: 100%;
  min-height: 32px;
  padding: 0;
  background: none;
  border: none;
  accent-color: var(--colore-primario-chiaro);
}

/* Pulsanti Indietro / Avanti / Crea account */
.azioni-passo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}

.azioni-passo.con-indietro {
  grid-template-columns: 1fr 2fr;
}

/* Selettore della lingua (IT / EN / DE): nella barra in alto e, nelle pagine pubbliche, in alto a destra */
.selettore-lingua {
  position: relative;
  margin-left: auto;
}

.selettore-lingua-fisso {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 950;
}

.bottone-lingua {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  color: var(--colore-testo);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.menu-lingua {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  padding: 4px;
  background: var(--colore-superficie-alt);
  border: 1px solid var(--colore-bordo);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 1000;
}

.menu-lingua[hidden] {
  display: none;
}

.menu-lingua button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--colore-testo);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.menu-lingua button[aria-checked="true"] {
  background: rgba(138, 46, 212, 0.25);
  font-weight: 700;
}

/* Informativa sulla privacy: tre versioni nella stessa pagina, si vede solo quella della lingua scelta (vedi js/i18n.js) */
.versione-privacy {
  display: none;
}

html[lang="it"] .versione-privacy[lang="it"],
html[lang="en"] .versione-privacy[lang="en"],
html[lang="de"] .versione-privacy[lang="de"] {
  display: block;
}

/* =====================================================================
   Revisione grafica (6 nov 2026): elementi comuni nuovi
   - intestazione delle pagine di dettaglio (indietro · titolo · azioni)
   - schede interne a "segmenti"
   - titoletti di sezione e elenchi a righe (al posto di tante schede uguali)
   - barra dell'azione principale sopra il menu in basso
   - foglio che sale dal basso per le azioni rare
   ===================================================================== */
.testata-dettaglio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.testata-dettaglio h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 26px;
  line-height: 1.1;
}

.bottone-icona {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  display: grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}

.bottone-icona:hover {
  border-color: var(--colore-primario);
}

/* Schede interne (es. Partita | Chat) */
.segmenti {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 12px;
}

.segmento {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--colore-testo-chiaro);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.segmento[aria-selected="true"] {
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  box-shadow: inset 0 0 0 1px var(--colore-bordo-campo);
}

.contatore {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--colore-primario);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* Titoletto di sezione: piccolo, maiuscolo, senza cornice */
.titolo-sezione {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 20px 4px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colore-testo-chiaro);
}

/* Elenco a righe: icona · testo e sottotesto · freccia */
.righe {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}

.riga-voce {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--colore-bordo);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.righe > .riga-voce:first-child,
.righe > div:first-child > .riga-voce,
#riga-campo:empty + .riga-voce {
  border-top: 0;
}

button.riga-voce,
a.riga-voce {
  cursor: pointer;
}

button.riga-voce:hover,
a.riga-voce:hover {
  background: var(--colore-superficie-alt);
}

.riga-icona {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--colore-superficie-alt);
  color: var(--colore-primario-chiaro);
}

.riga-icona.ok {
  background: var(--colore-successo-sfondo);
  color: var(--colore-successo);
}

.riga-icona.attenzione {
  background: #3a2d10;
  color: #ffc857;
}

.riga-testo {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.riga-titolo {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.riga-sotto {
  font-size: 13px;
  font-weight: 400;
  color: var(--colore-testo-chiaro);
}

.riga-freccia {
  flex: 0 0 auto;
  color: var(--colore-testo-chiaro);
  display: grid;
}

.riga-voce .slot {
  flex: 0 0 auto;
}

.riga-voce.pericolo .riga-titolo,
.riga-voce.pericolo .riga-icona {
  color: var(--colore-errore);
}

.riga-attenuata .riga-titolo {
  opacity: 0.75;
}

.riga-barrata {
  text-decoration: line-through;
}

.riga-libero {
  color: var(--colore-palla);
  font-weight: 600;
}

/* Scheda principale della partita (stesso aspetto delle schede della lista) */
.scheda-partita {
  padding: 14px 16px;
  border-radius: 16px;
}

/* Riquadro che chiede una risposta (es. proposta in corso) */
.scheda-avviso {
  border-color: var(--colore-primario-chiaro);
  background: linear-gradient(180deg, rgba(194, 77, 255, 0.12), var(--colore-superficie) 70%);
}

/* Barra dell'azione principale: resta visibile sopra il menu in basso */
.barra-azione-partita {
  position: sticky;
  bottom: calc(68px + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  gap: 6px;
  margin: 16px -16px 0;
  padding: 10px 16px 12px;
  background: rgba(16, 16, 33, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--colore-bordo);
}

.barra-azione-partita .testo-piccolo {
  margin: 0;
}

/* Chat nella sua scheda: più alta */
#vista-chat .chat-messaggi {
  max-height: calc(100vh - 360px);
  max-height: calc(100dvh - 360px);
  min-height: 240px;
}

/* Foglio che sale dal basso */
body.foglio-aperto {
  overflow: hidden;
}

.foglio-velo {
  position: fixed;
  inset: 0;
  z-index: 990;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.foglio {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
}

.foglio:focus {
  outline: none;
}

.foglio-maniglia {
  width: 40px;
  height: 4px;
  margin: 2px auto 12px;
  border-radius: 4px;
  background: var(--colore-bordo-campo);
}

.foglio-chiudi {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 40px;
  height: 40px;
}

.foglio-corpo h3 {
  padding-right: 48px;
}

/* Dentro il foglio i pannelli non hanno una seconda cornice */
.foglio .scheda,
.foglio [id^="pannello-"] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .foglio {
    animation: foglio-sale 0.18s ease-out;
  }
}

@keyframes foglio-sale {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

/* Dettaglio partita: giorno per esteso senza maiuscole sui mesi ("Sabato 7 novembre") */
.scheda-partita .p-giorno {
  text-transform: none;
}

/* Proposta in corso, compatta */
.proposta-cosa {
  margin: 0 0 2px;
}

.proposta-dettagli {
  margin: 0 0 10px;
  font-weight: 600;
}

.voti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.voto {
  padding: 3px 10px;
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  font-size: 12px;
  color: var(--colore-testo-chiaro);
}

.voto-si {
  border-color: var(--colore-successo);
  color: var(--colore-successo);
}

.voto-no {
  border-color: var(--colore-errore);
  color: var(--colore-errore);
}

/* La scheda Chat riempie lo schermo: le schede possono salire fino in cima */
#vista-chat {
  min-height: calc(100vh - 180px);
  min-height: calc(100dvh - 180px);
}

/* Titolo di pagina come h1 (stesso aspetto del vecchio h2 di "Partite") */
.testata-pagina h1 {
  margin: 0;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 28px;
  line-height: 1.1;
}

/* ---- Profilo come pagina indice ---- */
.profilo-chi {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 4px 14px;
}

.slot-grande {
  width: 52px;
  height: 52px;
  font-size: 18px;
  flex: 0 0 auto;
}

.profilo-nome {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.carta-livello {
  display: grid;
  gap: 6px;
  margin-bottom: 4px;
  padding: 14px 16px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}

.carta-livello:hover {
  border-color: var(--colore-primario);
}

.carta-livello-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.carta-livello-testa .titolo-sezione {
  margin: 0;
}

.carta-livello-corpo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.carta-livello-numero {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.carta-livello .pill {
  justify-self: start;
}

/* Righe-etichetta con interruttore (preferenze notifiche) */
label.riga-voce {
  cursor: pointer;
}

.riga-titolo-normale {
  font-weight: 400;
  font-size: 14px;
}

/* Interruttore acceso/spento: è una casella vera (accessibile da tastiera e screen reader) */
input.interruttore {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--colore-bordo);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}

input.interruttore::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

input.interruttore:checked {
  background: var(--colore-primario);
}

input.interruttore:checked::after {
  transform: translateX(18px);
}

@media (prefers-reduced-motion: reduce) {
  input.interruttore,
  input.interruttore::after {
    transition: none;
  }
}

/* Azione irreversibile (es. cancellazione account) */
.bottone-pericolo {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
  border: 1px solid var(--colore-errore);
}

/* ---- Scelte "a chip" (Crea partita) ---- */
/* Riga di chip che scorre di lato (giorni, orari) */
.scorrimento-chip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  margin: 0 -16px 6px;
  padding-left: 16px;
  padding-right: 16px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}

.scorrimento-chip::-webkit-scrollbar {
  display: none;
}

.chip-scelta {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--colore-bordo-campo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.chip-scelta[aria-checked="true"] {
  border-color: var(--colore-primario-chiaro);
  background: rgba(194, 77, 255, 0.18);
  box-shadow: inset 0 0 0 1px var(--colore-primario-chiaro);
}

/* Chip del giorno: "sab / 7 / nov" */
.chip-sopra,
.chip-sotto {
  font-size: 11px;
  font-weight: 600;
  color: var(--colore-testo-chiaro);
}

.chip-grande {
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 1px 0;
}

#chip-date .chip-scelta {
  min-width: 58px;
  padding: 8px 10px;
}

/* Caselle vere ma con l'aspetto di chip (circoli, gruppi) */
.elenco-chip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elenco-chip .voce-checkbox,
.segmenti-scelta .voce-checkbox {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.elenco-chip .voce-checkbox input,
.segmenti-scelta .voce-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.elenco-chip .voce-checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--colore-bordo-campo);
  background: var(--colore-superficie);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.elenco-chip .voce-checkbox input:checked + label {
  border-color: var(--colore-primario-chiaro);
  background: rgba(194, 77, 255, 0.18);
}

.elenco-chip .voce-checkbox input:checked + label::before {
  content: "✓";
  color: var(--colore-primario-chiaro);
  font-weight: 800;
}

/* Scelta a segmenti con radio vere (visibilità, lato) */
.segmenti-scelta {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 8px 0 14px;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 12px;
}

.segmenti-scelta .voce-checkbox {
  flex: 1;
}

.segmenti-scelta .voce-checkbox label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--colore-testo-chiaro);
  text-align: center;
  cursor: pointer;
}

.segmenti-scelta .voce-checkbox input:checked + label {
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  box-shadow: inset 0 0 0 1px var(--colore-bordo-campo);
}

/* Il focus da tastiera deve vedersi anche se la casella vera è nascosta */
.elenco-chip .voce-checkbox input:focus-visible + label,
.segmenti-scelta .voce-checkbox input:focus-visible + label {
  outline: 2px solid var(--colore-primario-chiaro);
  outline-offset: 2px;
}

.griglia-due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.riepilogo-crea {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--colore-testo-chiaro);
  text-align: center;
}

/* Le mie partite: la prossima partita in evidenza */
.partita-in-evidenza .partita {
  border-color: var(--colore-primario-chiaro);
  box-shadow: 0 0 0 1px rgba(194, 77, 255, 0.35);
}

/* Riga di testo corta con accanto il pulsante "ⓘ" (es. Gruppi) */
.riga-spiegazione {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 10px;
}

.riga-spiegazione .testo-piccolo {
  margin: 0;
}

/* Titolo di pagina con il pulsante "ⓘ" subito accanto */
.testata-pagina .bottone-info {
  margin-right: auto;
}

/* ---- Gruppi: ricerca giocatori, membri e bloccati a righe (6 nov 2026) ---- */
.scheda-gruppo {
  display: grid;
  gap: 12px;
}

.scheda-gruppo .righe {
  margin-bottom: 0;
}

.titolo-gruppo {
  margin: 0;
  font-family: "Baloo 2", -apple-system, sans-serif;
  font-size: 20px;
  overflow-wrap: anywhere;
}

/* Casella di ricerca con la lente dentro */
.ricerca-giocatori {
  position: relative;
  margin: 0 0 10px;
}

.scheda-gruppo .ricerca-giocatori {
  margin: 0;
}

.ricerca-giocatori input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 999px;
  background: var(--colore-superficie-alt);
  color: var(--colore-testo);
  font-family: inherit;
  font-size: 16px;
}

.ricerca-giocatori input::placeholder {
  color: var(--colore-testo-chiaro);
}

.ricerca-giocatori input:focus {
  outline: none;
  border-color: var(--colore-primario-chiaro);
}

.ricerca-icona {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--colore-testo-chiaro);
  pointer-events: none;
}

/* Risultati della ricerca: un riquadro leggermente diverso dall'elenco dei membri */
.righe-risultati {
  background: var(--colore-superficie-alt);
  border-color: var(--colore-bordo-campo);
  margin-bottom: 10px;
}

.risultati-vuoti {
  margin: 0 4px 10px;
}

/* Piccolo pulsante bordato a destra di una riga (Aggiungi, Rimuovi, Blocca, Sblocca) */
.bottone-riga {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--colore-primario-chiaro);
  background: transparent;
  color: var(--colore-primario-chiaro);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.bottone-riga:hover {
  background: rgba(194, 77, 255, 0.12);
}

.bottone-riga.pericolo {
  border-color: var(--colore-errore);
  color: var(--colore-errore);
}

.bottone-riga.pericolo:hover {
  background: var(--colore-errore-sfondo);
}

.link-pericolo {
  color: var(--colore-errore);
  justify-self: start;
}

.titolo-membri {
  margin: 4px 4px -4px;
}

/* Testo delle richieste di assistenza: mantiene gli a capo (es. "Circolo: …" / "Dove: …") */
.testo-richiesta {
  white-space: pre-line;
}

/* ============================================
   Novità del 6 nov 2026 (lista d'attesa, calendario, mappa,
   sagome di caricamento, avvisi, "non solo colore")
   ============================================ */

/* Sagome grigie al posto di "Caricamento...": la forma di quello che sta arrivando */
.sagome {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.sagoma {
  display: block;
  border-radius: 10px;
  background: var(--colore-superficie-alt);
}

/* L'opacità la anima la scheda grafica del telefono, senza ridisegnare la pagina */
@media (prefers-reduced-motion: no-preference) {
  .sagome {
    animation: sagoma-respira 1.2s ease-in-out infinite alternate;
  }
}

@keyframes sagoma-respira {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

.sagoma-carta {
  height: 148px;
  border-radius: 16px;
  border: 1px solid var(--colore-bordo);
}

.sagoma-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--colore-bordo);
  border-radius: 14px;
  background: var(--colore-superficie);
}

.sagoma-tondo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.sagoma-testo {
  flex: 1;
  display: grid;
  gap: 6px;
}

.sagoma-linea {
  height: 12px;
  width: 85%;
}

.sagoma-linea.corta {
  width: 50%;
}

.sagoma-linea.media {
  width: 70%;
}

/* Avviso "sei senza connessione" in cima allo schermo */
.avviso-rete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding: calc(6px + env(safe-area-inset-top)) 16px 6px;
  background: #3a2d10;
  color: #ffd98a;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #6b5420;
}

.avviso-rete.tornata {
  background: var(--colore-successo-sfondo);
  color: var(--colore-successo);
  border-bottom-color: #1f5a3a;
}

/* Messaggio breve in basso, con un eventuale "Annulla" */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 32px);
  max-width: 448px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  background: #2a2747;
  color: var(--colore-testo);
  border: 1px solid var(--colore-bordo-campo);
  border-radius: 14px;
  box-shadow: var(--ombra);
  font-size: 14px;
}

.toast span {
  flex: 1;
}

.toast-azione {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--colore-primario-chiaro);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.toast-azione:hover {
  background: rgba(194, 77, 255, 0.12);
}

/* Righe con un'azione scritta a destra (es. "Mappa") */
.riga-azione {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--colore-primario-chiaro);
  font-size: 14px;
  font-weight: 700;
}

/* Chat: segnala un messaggio */
.chat-messaggio {
  position: relative;
}

.chat-intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-segnala {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: -6px -8px -4px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--colore-testo-chiaro);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.chat-segnala:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--colore-errore);
}

/* Non solo colore: le scelte selezionate hanno anche un segno di spunta */
.chip-scelta {
  position: relative;
}

.chip-scelta[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--colore-primario-chiaro);
}

.seg input:checked + .seg-voce::before {
  content: "✓ ";
  font-weight: 800;
}

.segmenti-scelta .voce-checkbox input:checked + label::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 800;
  color: var(--colore-primario-chiaro);
}

.chip.attivo::after {
  content: "•";
  margin-left: -2px;
  color: var(--colore-primario-chiaro);
  font-weight: 800;
}

select.chip.attivo::after {
  content: none;
}

.menu-lingua button[aria-checked="true"]::after {
  content: " ✓";
}

/* Il messaggio con "Annulla" sta sopra la barra del pulsante principale */
body:has(.barra-azione-partita:not([hidden])) .toast {
  bottom: calc(150px + env(safe-area-inset-bottom));
}

/* ---------- Pagine dell'amministratore (revisione grafica del 6 nov 2026) ---------- */
.pill-pericolo {
  border-color: var(--colore-errore);
  color: var(--colore-errore);
}

.pill-avviso {
  border-color: #b8902e;
  color: #ffc857;
}

.riga-voce .pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Una richiesta o una segnalazione: intestazione con chi scrive, poi il testo */
.scheda-richiesta {
  display: grid;
  gap: 10px;
}

.scheda-richiesta .riga-intestazione {
  padding: 0;
  min-height: 0;
  border: 0;
}

.scheda-richiesta .testo-richiesta,
.scheda-richiesta .testo-piccolo {
  margin: 0;
}

.risposta-admin {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--colore-superficie-alt);
}

.risposta-admin .titolo-sezione {
  margin: 0;
}

.risposta-admin .bottone-link {
  justify-self: start;
}

.citazione {
  margin: 0;
  padding: 8px 12px;
  border-left: 3px solid var(--colore-errore);
  border-radius: 0 10px 10px 0;
  background: var(--colore-superficie-alt);
}

.chat-admin {
  max-height: 360px;
  margin: 0;
}

a.bottone-riga {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Voti nella pagina Valutazioni: icona diversa (freccia giù, uguale, freccia su) oltre al colore */
.riga-icona.voto-giu {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
}

.riga-icona.voto-giusto {
  background: var(--colore-superficie-alt);
  color: var(--colore-testo-chiaro);
}

.riga-icona.voto-su {
  background: var(--colore-successo-sfondo);
  color: var(--colore-successo);
}

#vista-luoghi > .bottone,
#vista-campi > .bottone,
#vista-zone > .bottone {
  width: 100%;
}

/* Etichetta di un gruppo di scelte dentro un modulo (stessa forma delle etichette dei campi) */
.campo-form .etichetta-campo {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--colore-testo);
}

.campo-form .segmenti-scelta {
  margin: 0 0 6px;
}

/* Filtri della lista partite: con 5 filtri l'ultimo prende tutta la riga */
.filtri-chip > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Guida rapida alla prima partita (js/guida.js) */
.guida {
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.guida h2 {
  margin: 0;
  outline: none;
}

.guida-icona {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: rgba(194, 77, 255, 0.16);
  color: var(--colore-primario-chiaro);
}

.guida-testo {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

.guida-punti {
  display: flex;
  gap: 6px;
}

.guida-punti span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--colore-bordo-campo);
}

.guida-punti span.attivo {
  width: 22px;
  border-radius: 4px;
  background: var(--colore-primario-chiaro);
}

.guida-conta {
  margin: 0;
}

.guida-pulsanti {
  display: flex;
  gap: 8px;
  width: 100%;
}

.guida-pulsanti .bottone {
  flex: 1;
}

.guida-pulsanti [hidden] {
  display: none;
}

/* Senza connessione: si vedono gli ultimi dati salvati, con la data */
.avviso-copia {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #3a2d10;
  color: #ffd98a;
  font-size: 13px;
  font-weight: 600;
}

/* La guida rapida sta sopra il banner "Attiva notifiche/Installa app" */
#overlay-guida {
  z-index: 1060;
}

/* "Giocatori" in Crea partita: quattro scelte con nomi lunghi, in una griglia 2 x 2 */
.segmenti-scelta.segmenti-quattro {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Interruttore "Mostra anche le partite al completo" sotto i filtri della lista */
.interruttore-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: 2px 2px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--colore-testo);
  cursor: pointer;
}