/* Desideri — un cielo notturno, una casella al centro, una stella d'oro. */
:root {
  --notte: #0d0b24;
  --notte-2: #1a1442;
  --viola: #34205f;
  --oro: #f5c66b;
  --oro-chiaro: #ffe3a3;
  --oro-scuro: #d9a441;
  --testo: #f3eefc;
  --tenue: #b9b1d6;
  --vetro: rgba(18, 12, 44, .66);  /* senza sfocatura (pesante da calcolare) servono riquadri più coprenti */
  --vetro-forte: rgba(28, 20, 62, .76);
  --bordo: rgba(255, 255, 255, .14);
  --errore: #ff9a8f;
  --ok: #9be6c0;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --raggio: 18px;
  color-scheme: dark;
}

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

html { background: var(--notte); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent; /* lo sfondo è la foto in .cielo */
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--oro); text-underline-offset: 3px; }
a:hover { color: var(--oro-chiaro); }

:focus-visible {
  outline: 1px solid var(--oro);
  outline-offset: 0px;
  border-radius: 24px 24px 0px 24px;
}

/* ---------- Il cielo (decorativo) ---------- */

/* La foto della luna resta ferma mentre la pagina scorre (un livello fisso funziona
   anche sui telefoni, dove background-attachment: fixed viene ignorato). Il velo scuro
   tiene leggibili testi e campi sopra la luna.
   Peso: ogni schermo scarica una sola foto, della misura giusta e nel formato più leggero che
   il browser conosce (AVIF, poi WebP, poi JPEG). La prima riga background-image è la riserva
   per i browser che non capiscono image-set(). Le stesse foto sono "precaricate" in inc/testata.php. */
.cielo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  will-change: transform; /* livello a parte: scorrendo la pagina la foto non viene ridisegnata */
  background-color: var(--notte);
  background-image:
    linear-gradient(180deg, rgba(13, 11, 36, .18) 0%, rgba(13, 11, 36, .25) 45%, rgba(13, 11, 36, .6) 100%),
    url("sfondo-900.jpg");
  background-image:
    linear-gradient(180deg, rgba(13, 11, 36, .18) 0%, rgba(13, 11, 36, .25) 45%, rgba(13, 11, 36, .6) 100%),
    image-set(url("sfondo-900.avif") type("image/avif"), url("sfondo-900.webp") type("image/webp"), url("sfondo-900.jpg") type("image/jpeg"));
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 701px) {
  .cielo {
    background-image:
      linear-gradient(180deg, rgba(13, 11, 36, .12) 0%, rgba(13, 11, 36, .18) 45%, rgba(13, 11, 36, .5) 100%),
      url("sfondo-1600.jpg");
    background-image:
      linear-gradient(180deg, rgba(13, 11, 36, .12) 0%, rgba(13, 11, 36, .18) 45%, rgba(13, 11, 36, .5) 100%),
      image-set(url("sfondo-1600.avif") type("image/avif"), url("sfondo-1600.webp") type("image/webp"), url("sfondo-1600.jpg") type("image/jpeg"));
  }
}

/* Solo gli schermi molto grandi scaricano la versione più definita. */
@media (min-width: 1800px) {
  .cielo {
    background-image:
      linear-gradient(180deg, rgba(13, 11, 36, .12) 0%, rgba(13, 11, 36, .18) 45%, rgba(13, 11, 36, .5) 100%),
      url("sfondo-2400.jpg");
    background-image:
      linear-gradient(180deg, rgba(13, 11, 36, .12) 0%, rgba(13, 11, 36, .18) 45%, rgba(13, 11, 36, .5) 100%),
      image-set(url("sfondo-2400.avif") type("image/avif"), url("sfondo-2400.webp") type("image/webp"), url("sfondo-2400.jpg") type("image/jpeg"));
  }
}

/* Le pagine interne, piene di testo, hanno un velo più fitto. */
body:not(.pagina-home) .cielo::after { content: ""; position: absolute; inset: 0; background: rgba(13, 11, 36, .15); }

.cometa {
  position: absolute;
  top: 12%;
  left: 70%;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, var(--oro-chiaro), transparent);
  border-radius: 2px;
  transform: rotate(-25deg);
  opacity: 0;
  animation: cometa 11s ease-in 2s infinite;
}

@keyframes cometa {
  0%   { opacity: 0; transform: rotate(-25deg) translateX(0); }
  3%   { opacity: 1; }
  10%  { opacity: 0; transform: rotate(-25deg) translateX(-420px); }
  100% { opacity: 0; transform: rotate(-25deg) translateX(-420px); }
}

@media (prefers-reduced-motion: reduce) {
  .cometa { animation: none; }
  .cometa { display: none; }
}

/* ---------- Barra e piè di pagina ---------- */

/* Tre colonne: marchio a sinistra, menu al centro esatto della pagina, colonna destra vuota
   della stessa larghezza (così il menu resta centrato qualunque sia la lunghezza del marchio). */
.barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 20px;
  padding: 16px 24px;
}

.barra-marchio { justify-self: start; }
.menu { justify-content: center; }

.barra-marchio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--testo);
  font-family: var(--serif);
  font-size: 1.3rem;
  text-decoration: none;
}

.stellina { width: 20px; height: 20px; fill: var(--oro); }

.pagina-home .barra-marchio span { visibility: hidden; } /* in home il nome è già al centro */

.menu { display: flex; flex-wrap: wrap; gap: 4px 18px; }

.menu a {
  color: var(--tenue);
  text-decoration: none;
  font-size: .95rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.menu a:hover { color: var(--testo); }
.menu a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--oro); }

.pallino {
  display: inline-block;
  min-width: 1.4em;
  margin-left: 6px;
  padding: 0 .4em;
  border-radius: 1em;
  background: var(--oro);
  color: var(--notte);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4em;
  text-align: center;
}

.contenuto {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 16px 16px 56px;
}

.piede {
  padding: 20px 16px 28px;
  color: var(--tenue);
  font-size: .85rem;
  text-align: center;
}

.piede p { margin: 0; }
.piede a { color: var(--tenue); }
.piede a:hover { color: var(--testo); }

/* ---------- Home ---------- */

.pagina-home .contenuto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 640px;
}

.eroe { text-align: center; }

.titolo {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 6rem);
  line-height: 1;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--oro-chiaro) 10%, var(--oro) 55%, var(--oro-scuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(245, 198, 107, .25);
}

.sottotitolo {
  margin: 10px 0 34px;
  color: #d5d1e5;
  font-size: clamp(.8rem, 2.6vw, .95rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: revert-layer;
  /* Alone scuro a più strati: stacca la scritta dalla luna che le sta dietro. */
  text-shadow:
    0 1px 2px rgba(13, 11, 36, .95),
    0 0 6px rgba(13, 11, 36, .9),
    0 0 14px rgba(13, 11, 36, .85),
    0 0 28px rgba(13, 11, 36, .7);
}

.numeri {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin: 36px 0 0;
  color: var(--tenue);
  font-size: .9rem;
}

.numeri strong { color: var(--testo); font-weight: 600; }

/* ---------- Moduli ---------- */

.modulo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  text-align: left;
}

.modulo-stretto { max-width: 560px; }

.campo-desiderio { position: relative; }

textarea, input[type="text"], input[type="email"] {
  width: 100%;
  font: inherit;
  color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 11px 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

textarea { resize: vertical; min-height: 6em; }

textarea:focus, input:focus {
  border-color: rgba(245, 198, 107, .7);
  background: var(--vetro-forte);
  box-shadow: 0 0 0 4px rgba(245, 198, 107, .12);
}

::placeholder { color: var(--tenue); opacity: .85; }

#desiderio {
  min-height: 7.2em;
  padding: 22px 26px 30px;
  border-radius: 26px;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .35), 0 0 60px rgba(245, 198, 107, .06);
}

#desiderio:focus { box-shadow: 0 0 0 4px rgba(245, 198, 107, .14), 0 0 70px rgba(245, 198, 107, .18); }

.contatore {
  position: absolute;
  right: 20px;
  bottom: 8px;
  margin: 0;
  color: var(--tenue);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

.contatore.vicino { color: var(--oro); }

label { display: flex; flex-direction: column; gap: 6px; color: var(--tenue); font-size: .9rem; }

.riga-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 520px) { .riga-campi { grid-template-columns: 1fr; } }

.spunta { flex-direction: row; align-items: flex-start; gap: 10px; }
.spunta input { margin-top: .25em; width: 18px; height: 18px; accent-color: var(--oro); flex: none; }

/* Scelta anonimo / nominativo: due schede. */
.scelta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 520px) { .scelta { grid-template-columns: 1fr; } }

.opzione {
  position: relative;
  gap: 2px;
  padding: 14px 16px 14px 44px;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  background: var(--vetro);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.opzione input {
  position: absolute;
  left: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--oro);
}

.opzione:hover { background: var(--vetro-forte); }
.opzione:has(input:checked) { border-color: var(--oro); background: linear-gradient(rgba(245, 198, 107, .1), rgba(245, 198, 107, .1)), var(--vetro); }

.opzione-titolo { color: var(--testo); font-weight: 600; font-size: 1rem; }
.opzione-nota { font-size: .85rem; }

.dati-persona { display: flex; flex-direction: column; gap: 12px; }

/* Con la forma anonima non serve nessun dato. */
.modulo:has(#modo-anonimo:checked) .dati-persona { display: none; }

.pulsante {
  display: inline-block;
  align-self: center;
  padding: 13px 34px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 60%, var(--oro-scuro));
  color: #2a1a00;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(245, 198, 107, .25);
  transition: transform .15s, box-shadow .15s;
}

.pulsante:hover { color: #2a1a00; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(245, 198, 107, .4); }

.pulsante-piccolo { padding: 7px 16px; font-size: .88rem; }

.pulsante-chiaro {
  background: transparent;
  color: var(--oro);
  border: 1px solid var(--oro);
  box-shadow: none;
}

.pulsante-chiaro:hover { color: var(--oro-chiaro); background: rgba(245, 198, 107, .1); box-shadow: none; }

.regola { margin: 0; color: var(--oro); font-size: .92rem; text-align: center; }

.nota { margin: 0; color: var(--tenue); font-size: .88rem; }

.errore {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 120, 100, .1);
  border: 1px solid rgba(255, 154, 143, .4);
  color: var(--errore);
}

.avviso {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--bordo);
  background: var(--vetro);
}

.avviso-ok { border-color: rgba(155, 230, 192, .45); color: var(--ok); }
.avviso-errore { border-color: rgba(255, 154, 143, .45); color: var(--errore); }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nascosto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Esito dopo l'invio ---------- */

.esito {
  padding: 28px 24px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.esito p { margin: 0 0 12px; color: var(--tenue); }
.esito p:last-child { margin-bottom: 0; }

.esito-stella { width: 40px; height: 40px; fill: var(--oro); filter: drop-shadow(0 0 12px rgba(245, 198, 107, .7)); }

.esito .esito-titolo { color: var(--testo); font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }

/* ---------- Pagine interne ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 0 0 10px; }
h2 { font-size: 1.4rem; margin: 0 0 12px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--oro); }

.intestazione { margin: 8px 0 28px; }
.intestazione p { margin: 0 0 10px; color: var(--tenue); }
.intestazione .regola { text-align: left; }
.intro { font-size: 1.1rem; }

.scheda { display: flex; flex-direction: column; gap: 14px; }
.scheda h1 { margin: 6px 0 0; }
.scheda > p { margin: 0; color: var(--tenue); }
.scheda-centro { max-width: 560px; margin: 6vh auto 0; }
.scheda form .pulsante, .scheda-centro .pulsante { align-self: flex-start; }

.indietro { font-size: .9rem; }

.vuoto { padding: 40px 0; text-align: center; color: var(--tenue); }

/* Bacheca: i biglietti dei desideri. */
.bacheca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biglietto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--bordo);
  border-top: 2px solid rgba(245, 198, 107, .55);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.biglietto-mio { border-top-color: var(--tenue); }

.biglietto-testo {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.biglietto-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--tenue);
  font-size: .82rem;
}

.biglietto-grande .biglietto-testo { font-size: 1.4rem; }

.etichetta {
  padding: 2px 10px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--tenue);
  font-size: .78rem;
}

.pagine { display: flex; justify-content: center; gap: 18px; margin-top: 28px; color: var(--tenue); }

/* Area personale. */
.limiti { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }

@media (max-width: 560px) { .limiti { grid-template-columns: 1fr; } }

.limite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
  color: var(--tenue);
  font-size: .9rem;
}

.limite-numero { color: var(--oro); font-family: var(--serif); font-size: 2.2rem; line-height: 1; }

.sezione { margin: 0 0 32px; }

.elenco { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.riga {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  background: var(--vetro);
  color: var(--testo);
  text-decoration: none;
}

a.riga:hover { color: var(--testo); background: var(--vetro-forte); }
.riga-nuova { border-color: rgba(245, 198, 107, .6); }
.riga-titolo { overflow-wrap: anywhere; }
.riga-nota { color: var(--tenue); font-size: .85rem; }
.riga-azione { margin-top: 6px; }
.riga-azione .pulsante { align-self: flex-start; }

/* Conversazione. */
.messaggi { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; padding: 0; list-style: none; }

.messaggio {
  max-width: 85%;
  align-self: flex-start;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: 16px 16px 16px 4px;
  background: var(--vetro);
}

.messaggio-mio {
  align-self: flex-end;
  border-color: rgba(245, 198, 107, .35);
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(rgba(245, 198, 107, .1), rgba(245, 198, 107, .1)), var(--vetro);
}

.messaggio-autore { margin: 0 0 4px; color: var(--tenue); font-size: .8rem; }
.messaggio-testo { margin: 0; overflow-wrap: anywhere; }

/* Come funziona. */
.passi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

@media (max-width: 680px) { .passi { grid-template-columns: 1fr; } }

.passi li { padding: 20px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--vetro); }
.passi h2 { font-size: 1.25rem; margin: 10px 0 6px; }
.passi p { margin: 0; color: var(--tenue); font-size: .95rem; }

.passo-numero {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--oro);
  color: var(--notte);
  font-weight: 700;
}

.confronto { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 600px) { .confronto { grid-template-columns: 1fr; } }

.confronto-colonna { padding: 20px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--vetro); }
.confronto-evidenza { border-color: rgba(245, 198, 107, .5); }
.confronto ul, .regole { margin: 0; padding-left: 1.2em; color: var(--tenue); }
.confronto li, .regole li { margin-bottom: 6px; }
.regole { margin-bottom: 14px; }
.regole strong { color: var(--testo); }

.chiusura { text-align: center; }

.testo-lungo h2 { margin: 18px 0 0; }
.testo-lungo p, .testo-lungo ul { margin: 0; color: var(--tenue); }

/* ---------- Solo in sviluppo: email simulate ---------- */

.posta-sviluppo {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  width: min(440px, calc(100vw - 24px));
  max-height: 55vh;
  overflow: auto;
  padding: 12px 14px;
  border: 2px dashed #ffd36a;
  border-radius: 12px;
  background: #1d1a10;
  color: #f6ecd0;
  font: 13px/1.45 ui-monospace, Consolas, monospace;
}

.posta-titolo { margin: 0 0 8px; color: #ffd36a; font-weight: 700; }
.posta-email + .posta-email { border-top: 1px solid #4a4128; margin-top: 8px; padding-top: 8px; }
.posta-email p { margin: 0 0 6px; overflow-wrap: anywhere; }
.posta-email a { color: #ffd36a; }


/* Rassicurazione sulla privacy nella forma nominativa. */
.privacy-nota {
  padding: 10px 14px;
  border-left: 3px solid var(--oro);
  border-radius: 0 10px 10px 0;
  background: var(--vetro);
}

.privacy-nota strong { color: var(--testo); }

/* Bacheca: schede "Da realizzare" / "Anonimi". */
.schede {
  display: inline-flex;
  gap: 4px;
  margin: 6px 0 16px;
  padding: 4px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--vetro);
}

.schede a {
  padding: 6px 18px;
  border-radius: 999px;
  color: var(--tenue);
  text-decoration: none;
  font-size: .92rem;
}

.schede a:hover { color: var(--testo); }
.schede a[aria-current="page"] { background: var(--oro); color: var(--notte); font-weight: 600; }

.biglietto-anonimo { border-top-color: var(--bordo); }

/* Segnalazioni: bandierina discreta in alto a destra di ogni biglietto. */
.biglietto { position: relative; }
.bacheca .biglietto-testo { padding-right: 22px; }

.segnala {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--tenue);
  opacity: .55;
  transition: opacity .15s, background .15s, color .15s;
}

.segnala svg { width: 16px; height: 16px; }
.segnala:hover, .segnala:focus-visible { opacity: 1; color: var(--errore); background: var(--vetro-forte); }

.motivi { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.motivi legend { margin-bottom: 10px; color: var(--testo); }
.motivi .spunta span { color: var(--testo); font-size: .95rem; }

/* Moderazione. */
.azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.azioni form { margin: 0; }

.pulsante-pericolo {
  background: transparent;
  border: 1px solid var(--errore);
  color: var(--errore);
  box-shadow: none;
}

.pulsante-pericolo:hover { color: #fff; background: rgba(255, 120, 100, .25); box-shadow: none; }

input[type="password"] {
  width: 100%;
  font: inherit;
  color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 11px 14px;
}

/* ---------- Statistiche ---------- */

.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
@media (max-width: 760px) { .kpi { grid-template-columns: 1fr 1fr; } }

.kpi-voce {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.kpi-etichetta { color: var(--tenue); font-size: .82rem; }
.kpi-valore { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-nota { color: var(--tenue); font-size: .78rem; }
.kpi-oro { border-color: rgba(245, 198, 107, .55); }
.kpi-oro .kpi-valore { color: var(--oro); }

.stat-blocco {
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.stat-blocco > .nota { margin-bottom: 14px; }

.commento-testo p { margin: 0 0 10px; font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; }
.commenti-precedenti { margin-top: 10px; color: var(--tenue); }
.commenti-precedenti summary { cursor: pointer; color: var(--oro); }
.commenti-precedenti h3 { margin: 14px 0 4px; font-size: 1rem; color: var(--testo); }
.commenti-precedenti p { margin: 0 0 8px; }

.barre { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }

.grafico-barra {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr 92px;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
  border-radius: 6px;
}

@media (max-width: 520px) {
  .grafico-barra { grid-template-columns: 1fr 78px; }
  .gb-binario { grid-column: 1 / -1; grid-row: 2; }
}

.gb-nome { font-size: .92rem; overflow-wrap: anywhere; }
.gb-binario { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gb-riempimento { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--oro-scuro), var(--oro)); }
.gb-residuo .gb-riempimento { background: var(--tenue); opacity: .55; }
.gb-valore { text-align: right; font-variant-numeric: tabular-nums; font-size: .92rem; }
.gb-valore small { color: var(--tenue); }
.grafico-barra:hover .gb-riempimento, .grafico-barra:focus-visible .gb-riempimento { filter: brightness(1.15); }

.colonne { margin: 0; }
.colonne svg { display: block; width: 100%; height: auto; }
.colonne .griglia { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.colonne .base { stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.colonne .asse { fill: var(--tenue); font-size: 11px; }
.colonne .valore { fill: var(--oro); font-size: 12px; font-weight: 700; }
.colonna-presa { fill: transparent; }
.colonna-segno { fill: var(--oro); }
.colonna:hover .colonna-segno, .colonna:focus .colonna-segno { fill: var(--oro-chiaro); }
.colonna:focus { outline: none; }
.colonna:focus .colonna-presa { fill: rgba(245, 198, 107, .1); }

.tabella-dati { margin-top: 10px; color: var(--tenue); font-size: .9rem; }
.tabella-dati summary { cursor: pointer; color: var(--oro); }
.tabella-dati table { margin-top: 8px; border-collapse: collapse; }
.tabella-dati th, .tabella-dati td { padding: 3px 14px 3px 0; text-align: left; font-variant-numeric: tabular-nums; }

.suggerimento {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: #1a1440;
  font-size: .82rem;
  pointer-events: none;
}

.suggerimento[hidden] { display: none; }
.suggerimento span { color: var(--tenue); }

/* Testi appoggiati direttamente sulla foto (senza riquadro): un'ombra morbida li stacca dalla luna. */
.intestazione, .numeri, .grafico-barra, .piede, .indietro, .scheda > p, .scheda > h1, .regola {
  text-shadow: 0 1px 2px rgba(13, 11, 36, .9), 0 0 14px rgba(13, 11, 36, .85);
}

/* ---------- Bacheca in tabella: ricerca, ordine, stelle ---------- */

.strumenti-bacheca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 14px;
}

.ricerca { display: flex; flex: 1 1 320px; align-items: center; gap: 8px; }

.ricerca input[type="search"] {
  flex: 1;
  min-width: 0;
  font: inherit;
  color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 9px 16px;
  outline: none;
}

.ricerca input[type="search"]:focus { border-color: rgba(245, 198, 107, .7); box-shadow: 0 0 0 4px rgba(245, 198, 107, .12); }
.ricerca .pulsante { align-self: auto; }
.ricerca-azzera { font-size: .88rem; }

.ordine { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: .9rem; }
.ordine a { color: var(--tenue); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.ordine a:hover { color: var(--testo); }
.ordine a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--oro); }

.risultati { margin-bottom: 12px; }

.tabella-contenitore {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
  overflow: hidden;
}

.tabella-desideri { width: 100%; border-collapse: collapse; }

.tabella-desideri th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordo);
  color: var(--tenue);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

.tabella-desideri td { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: top; }
.tabella-desideri tbody tr:last-child td { border-bottom: 0; }
.tabella-desideri tbody tr:hover { background: rgba(255, 255, 255, .03); }
.tabella-desideri tr:target { background: rgba(245, 198, 107, .08); }
.riga-mia td:first-child { box-shadow: inset 3px 0 0 var(--tenue); }

.cella-testo { font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; overflow-wrap: anywhere; }
.cella-data { color: var(--tenue); font-size: .88rem; white-space: nowrap; }
.cella-voto { white-space: nowrap; }
.cella-nota { display: block; margin-top: 4px; color: var(--tenue); font-family: system-ui, sans-serif; font-size: .78rem; }
.cella-azioni { text-align: right; white-space: nowrap; }
.cella-azioni .pulsante { margin-bottom: 6px; }

.media { display: block; font-size: .9rem; }
.media strong { color: var(--oro); }
.media small { color: var(--tenue); }

/* Cinque pulsanti-stella. Al passaggio si illuminano fino a quella indicata. */
.stelle { display: inline-flex; margin-top: 4px; }

.stella {
  padding: 0 2px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .25);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color .1s, transform .1s;
}

.stella.accesa { color: var(--oro); }
.stelle:hover .stella { color: var(--oro-chiaro); }
.stelle .stella:hover ~ .stella { color: rgba(255, 255, 255, .25); }
.stella:hover { transform: scale(1.15); }
.stella:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; border-radius: 4px; }

.segnala-link { display: block; color: var(--tenue); font-size: .8rem; }
.segnala-link:hover { color: var(--errore); }

/* Sul telefono ogni riga diventa una scheda. */
@media (max-width: 700px) {
  .tabella-desideri thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabella-desideri, .tabella-desideri tbody, .tabella-desideri tr, .tabella-desideri td { display: block; width: 100%; }
  .tabella-desideri tr { padding: 14px 16px; border-bottom: 1px solid var(--bordo); }
  .tabella-desideri tbody tr:last-child { border-bottom: 0; }
  .tabella-desideri td { padding: 4px 0; border: 0; }
  .cella-azioni { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; text-align: left; margin-top: 6px; }
  .cella-azioni .pulsante { margin: 0; }
}

/* Telefono: marchio e menu centrati, uno sotto l'altro; il menu può andare a capo. */
.menu a { white-space: nowrap; }

@media (max-width: 600px) {
  .barra { grid-template-columns: 1fr; justify-items: center; padding: 12px 16px; }
  .barra-marchio { justify-self: center; }
  .menu { gap: 2px 16px; }
  .menu a { font-size: .9rem; }
  .pagina-home .barra-marchio { display: none; }
}

/* ---------- Qualcosa di mistico ---------- */

.sopratitolo { margin: 0 0 6px !important; color: var(--oro) !important; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; }
.mistico-testa h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.mistico-testa .intro { max-width: 660px; }
.mistico-testa .intro strong { color: var(--testo); }

/* Il sentiero: una linea verticale con una stella d'oro per ogni tappa. */
.sentiero { position: relative; margin: 8px 0 14px; padding: 0 0 0 30px; list-style: none; }

.sentiero::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--oro), rgba(245, 198, 107, .15));
}

.tappa {
  position: relative;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.tappa::before {
  content: "✦";
  position: absolute;
  top: 16px;
  left: -31px;
  color: var(--oro);
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(245, 198, 107, .8);
}

.tappa h3 { margin: 2px 0 10px; color: var(--testo); font-size: 1.25rem; }
.tappa > p { margin: 0; color: var(--tenue); }
.tappa-quando { margin: 0 !important; color: var(--oro) !important; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

.tappa-citazione {
  margin: 0 0 12px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(245, 198, 107, .6);
}

.tappa-citazione p { margin: 0 0 4px; font-family: var(--serif); font-size: 1.2rem; font-style: italic; line-height: 1.45; }
.tappa-citazione footer { color: var(--tenue); font-size: .82rem; }

.riquadro {
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--vetro);
}

.riquadro > p { color: var(--tenue); margin: 0 0 12px; }
.riquadro > p strong { color: var(--testo); }
.confronto-colonna p { margin: 0; color: var(--tenue); }

/* ---------- Condivisione (in fondo al piè di pagina) ---------- */

.condividi { margin-top: 18px; }

.condividi-titolo { margin: 0 0 10px !important; color: var(--oro); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; }

.condividi-elenco {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.condividi-elenco li[hidden], .condividi-elenco [hidden] { display: none; }

/* Cerchi da 42px; sul telefono 38px, così tutti e otto (con «Condividi» del telefono) stanno su una riga. */
.condividi-elenco a, .condividi-elenco button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(245, 198, 107, .45);
  border-radius: 50%;
  background: var(--vetro);
  color: var(--oro) !important;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}

@media (max-width: 600px) {
  .condividi-elenco { gap: 5px; }
  .condividi-elenco a, .condividi-elenco button { width: 38px; height: 38px; }
  .condividi-elenco svg { width: 18px; height: 18px; }
}

.condividi-elenco svg { width: 20px; height: 20px; }

.condividi-elenco a:hover, .condividi-elenco button:hover { transform: translateY(-2px); color: #fff !important; border-color: transparent; }

/* Al passaggio del mouse ogni cerchio prende il colore della sua piattaforma. */
.condividi-whatsapp:hover { background: #25d366 !important; }
.condividi-facebook:hover { background: #0866ff !important; }
.condividi-x:hover        { background: #000 !important; border-color: rgba(255, 255, 255, .4) !important; }
.condividi-linkedin:hover { background: #0a66c2 !important; }
.condividi-telegram:hover { background: #26a5e4 !important; }
.condividi-email:hover, #condividi-copia:hover { background: rgba(245, 198, 107, .25) !important; color: var(--oro-chiaro) !important; border-color: var(--oro) !important; }

/* "Condividi" con le app del telefono (comprende Instagram): il più comodo dove esiste, quindi pieno d'oro. */
#condividi-nativo { background: linear-gradient(180deg, var(--oro-chiaro), var(--oro) 60%, var(--oro-scuro)); color: #2a1a00 !important; border-color: transparent; }
#condividi-nativo:hover { color: #2a1a00 !important; }

/* ---------- Pannello amministrativo ---------- */

.contenuto-largo { max-width: 1100px; }
.pagina-admin .kpi-allerta { border-color: rgba(255, 154, 143, .6); }
.pagina-admin .kpi-allerta .kpi-valore { color: var(--errore); }

.menu-esci { display: inline; margin: 0; }
.menu-esci button { padding: 4px 0; border: 0; background: none; color: var(--tenue); font: inherit; font-size: .95rem; cursor: pointer; }
.menu-esci button:hover { color: var(--testo); }

.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.filtri input[type="search"] { flex: 1 1 240px; width: auto; }
.filtri label { flex-direction: row; align-items: center; gap: 6px; }

select {
  font: inherit;
  color: var(--testo);
  background: var(--vetro);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 7px 10px;
}

.stato { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--bordo); font-size: .8rem; white-space: nowrap; }
.stato-attivo { color: var(--ok); border-color: rgba(155, 230, 192, .45); }
.stato-nascosto { color: var(--errore); border-color: rgba(255, 154, 143, .5); }
.stato-realizzato { color: var(--oro); border-color: rgba(245, 198, 107, .5); }

.tabella-admin .cella-azioni { white-space: normal; min-width: 150px; }
.tabella-admin .azioni { justify-content: flex-end; margin: 0; }
.riga-nascosta td { background: rgba(255, 120, 100, .05); }

/* ---------- Avviso sui cookie ---------- */

.avviso-cookie {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 30;
  width: min(560px, calc(100vw - 24px));
  transform: translateX(-50%);
  padding: 18px 20px 16px;
  border: 1px solid rgba(245, 198, 107, .55);
  border-radius: var(--raggio);
  background: rgba(18, 12, 44, .96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  font-size: .92rem;
}

.avviso-cookie[hidden] { display: none; }
.avviso-cookie form { position: relative; margin: 0; }
.avviso-cookie p { margin: 0 0 10px; color: var(--tenue); }
.avviso-cookie-titolo { color: var(--oro) !important; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }

.avviso-cookie-chiudi {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tenue);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.avviso-cookie-chiudi:hover { color: var(--testo); background: var(--vetro-forte); }

.avviso-cookie-tasti, .cookie-scelte { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-scelte { justify-content: flex-start; }

/* «Accetta» e «Rifiuta» identici: nessuna scelta spinta più dell'altra. */
.pulsante-cookie {
  align-self: auto;
  min-width: 120px;
  padding: 9px 20px;
  background: transparent;
  border: 1px solid var(--oro);
  color: var(--oro);
  box-shadow: none;
}

.pulsante-cookie:hover { background: rgba(245, 198, 107, .16); color: var(--oro-chiaro); box-shadow: none; transform: none; }

/* ---------- La frase manifesto ---------- */

.slogan {
  margin: 30px auto 0;
  max-width: 560px;
  color: var(--testo);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.6vw, 1.3rem);
  font-style: italic;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 2px rgba(13, 11, 36, .95), 0 0 10px rgba(13, 11, 36, .9), 0 0 22px rgba(13, 11, 36, .75);
}

.slogan em { color: var(--oro); font-style: italic; }
.slogan-sinistra { margin: 0 0 12px; text-align: left; }
.sezione .slogan { margin-top: 20px; }