/* ==========================================================
   Pagina mappa
   ========================================================== */

:root {
  --colonna: 392px;
  --margine: 16px;
  --foglio-visibile: 0px;
  --testata-h: 0px;
}

html, body { height: 100%; overflow: hidden; }
body { background: #E7E6DE; overscroll-behavior: none; }

.mappa { position: fixed; inset: 0; }
.maplibregl-canvas { outline: none; }

/* Trama della carta (Storia) e vignettatura notturna (Eventi) */
.grana {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--curva);
}
body[data-atmosfera="archivio"] .grana {
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(58, 44, 34, 0.28) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.2 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}
body[data-atmosfera="notte"] .grana {
  opacity: 1;
  background: radial-gradient(ellipse at 62% 42%, transparent 45%, rgba(4, 7, 20, 0.55) 100%);
}

/* ---------- Colonna: testata + foglio ---------- */

.colonna {
  position: fixed; z-index: 10;
  top: var(--margine); left: var(--margine); bottom: var(--margine);
  width: var(--colonna);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
  transition: opacity 0.6s var(--curva), transform 0.6s var(--curva);
}
.testata, .foglio, .cursore, .comandi > * {
  transition: background-color var(--durata), color var(--durata), border-color var(--durata), box-shadow var(--durata);
}
.testata {
  pointer-events: auto;
  background: var(--sup);
  color: var(--testo);
  border-radius: var(--r-grande);
  box-shadow: var(--ombra);
  padding: 12px 12px 10px;
}
.testata-riga { display: flex; align-items: center; gap: 12px; }

.marchio {
  display: flex; flex-direction: column; text-decoration: none; padding: 2px 4px 2px 6px; flex: none;
}
.marchio-nome {
  font-family: var(--font-titoli); font-weight: 800; font-size: 1.7rem; line-height: 0.95; letter-spacing: -0.01em;
}
.marchio-prov { font-size: var(--t-xs); color: var(--testo-3); margin-top: 3px; }

.ricerca { position: relative; flex: 1; min-width: 0; }
.ricerca input {
  width: 100%; height: 40px;
  padding: 0 36px 0 36px;
  border: 1px solid var(--linea); border-radius: var(--r-pillola);
  background: var(--sup-2); color: var(--testo);
  font-size: var(--t-s);
  transition: background-color var(--durata), border-color 0.2s;
  -webkit-appearance: none; appearance: none;
}
.ricerca input::placeholder { color: var(--testo-3); }
.ricerca input::-webkit-search-cancel-button { display: none; }
.ricerca input:focus-visible { outline: none; border-color: var(--accento); background: var(--sup); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 22%, transparent); }
.ricerca-icona { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--testo-3); pointer-events: none; }
.ricerca-cancella {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; background: none; color: var(--testo-2); border-radius: 50%;
}
.ricerca-cancella:hover { background: var(--sup-3); }

.modi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 12px; padding: 4px;
  background: var(--sup-2); border-radius: 14px;
  transition: background-color var(--durata);
}
.modi button {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 6px 4px;
  border: 0; border-radius: 10px; background: transparent; color: var(--testo-2);
  font-weight: 500; font-size: var(--t-s);
  transition: background-color 0.35s, color 0.35s;
}
.modi button:hover { color: var(--testo); background: color-mix(in srgb, var(--sup) 70%, transparent); }
.modi button[aria-selected="true"] { background: var(--accento); color: var(--su-accento); font-weight: 700; box-shadow: var(--ombra-piccola); }

.foglio {
  pointer-events: auto;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--sup); color: var(--testo);
  border-radius: var(--r-grande);
  box-shadow: var(--ombra);
  overflow: hidden;
}
.maniglia { display: none; }
.corpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 18px 12px;
  scrollbar-width: thin; scrollbar-color: var(--sup-3) transparent;
}
.corpo:focus-visible { outline-offset: -3px; }

.piede {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs); color: var(--testo-3);
  transition: border-color var(--durata);
}
.piede p { max-width: 30ch; line-height: 1.3; }
.piede-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--testo-2); white-space: nowrap; padding: 6px 8px; border-radius: 8px; }
.piede-link:hover { background: var(--sup-2); color: var(--testo); }

/* ---------- Sezione: titolo e filtri ---------- */

.sezione-testa { margin-bottom: 14px; }
.sezione-titolo { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -0.005em; }
.sezione-descrizione { color: var(--testo-2); margin-top: 6px; font-size: var(--t-s); max-width: 40ch; }

.filtri { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.filtri:empty { display: none; }
.filtro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 3px 11px 3px 8px;
  border: 1px solid var(--linea); border-radius: var(--r-pillola);
  background: var(--sup); color: var(--testo);
  font-size: var(--t-s); line-height: 1.1;
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.filtro:hover { border-color: var(--testo-3); }
.filtro .conta { color: var(--testo-3); font-variant-numeric: lining-nums tabular-nums; }
.filtro[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c) 16%, var(--sup));
  border-color: color-mix(in srgb, var(--c) 70%, var(--sup));
  font-weight: 700;
}
.filtri.filtrati .filtro[aria-pressed="false"] { opacity: 0.62; }
.filtro.azzera { border-style: dashed; color: var(--testo-2); padding-left: 12px; }
.filtro:disabled { opacity: 0.4; cursor: default; }

/* Tassello di pietra: il colore della categoria */
.tassello {
  display: inline-block; flex: none;
  width: 14px; height: 14px;
  background: var(--c);
  clip-path: polygon(8% 22%, 52% 2%, 94% 18%, 100% 66%, 64% 98%, 14% 90%, 0% 54%);
}
.tassello.grande { width: 20px; height: 20px; }

/* ---------- Elenco ---------- */

.gruppo + .gruppo { margin-top: 18px; }
.gruppo-titolo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-testo); font-weight: 700; font-size: var(--t-s); color: var(--testo-2);
  margin: 0 0 4px 4px;
}
.gruppo-titolo .conta { color: var(--testo-3); font-weight: 400; }

.voce {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px;
  width: 100%; padding: 10px 10px; margin: 0;
  border: 0; border-radius: var(--r-medio);
  background: transparent; text-align: left; color: var(--testo);
  transition: background-color 0.18s;
}
.voce:hover { background: var(--sup-2); }
.voce.attiva { background: var(--sup-3); }
.voce-segno {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: #fff; background: var(--c); clip-path: var(--forma);
}
.voce-titolo { display: block; font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-m); line-height: 1.2; }
.voce-meta { display: block; color: var(--testo-2); font-size: var(--t-s); margin-top: 2px; line-height: 1.3; }
.voce-strato { display: inline-block; color: var(--testo-3); font-size: var(--t-xs); margin-top: 3px; }

.voce-data {
  width: 56px; text-align: center; padding-top: 1px;
  font-family: var(--font-titoli);
}
.voce-data b { display: block; font-weight: 800; font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em; color: var(--c); }
.voce-data span { display: block; font-family: var(--font-testo); font-size: var(--t-xs); color: var(--testo-2); margin-top: 3px; }
.voce-data span:first-child:not(:last-child) { margin: 0 0 2px; }
body[data-atmosfera="notte"] .voce-data b, body[data-atmosfera="notte"] .voce-anno { color: color-mix(in srgb, var(--c) 55%, #FFFFFF); }

.voce-anno {
  min-width: 70px; padding-top: 1px;
  font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-l); line-height: 1.1; color: var(--c);
}

.vuoto {
  padding: 22px 18px; border: 1px dashed var(--linea); border-radius: var(--r-medio);
  color: var(--testo-2); font-size: var(--t-s);
}
.vuoto strong { display: block; color: var(--testo); font-family: var(--font-titoli); font-size: var(--t-l); margin-bottom: 6px; }
.vuoto .bottone { margin-top: 12px; }

/* ---------- Scheda di dettaglio ---------- */

.scheda { animation: entra-scheda 0.35s var(--curva); }
@keyframes entra-scheda { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.scheda-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -6px -6px 10px; }
.scheda-copertina {
  position: relative; margin: 0 0 16px;
  aspect-ratio: 16 / 8.5; border-radius: var(--r-medio); overflow: hidden;
  background: var(--sup-3);
}
.scheda-copertina svg, .scheda-copertina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scheda-copertina .segno {
  position: absolute; left: 14px; bottom: 14px;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: #FFFFFF; color: var(--c); clip-path: var(--forma);
}
.scheda-copertina .anno-grande {
  position: absolute; right: 16px; bottom: 6px;
  font-family: var(--font-titoli); font-weight: 800; font-size: 3.4rem; line-height: 1; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.scheda-categoria { display: flex; align-items: center; gap: 8px; color: var(--testo-2); font-size: var(--t-s); }
.scheda-titolo { font-size: var(--t-2xl); font-weight: 800; margin-top: 6px; letter-spacing: -0.005em; }
.scheda-quando { margin-top: 10px; font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; color: var(--enfasi); }
.scheda-quando span { display: block; font-family: var(--font-testo); font-weight: 400; font-size: var(--t-s); color: var(--testo-2); margin-top: 2px; }

.scheda-info { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.scheda-info li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: var(--t-s); color: var(--testo-2); }
.scheda-info li .icona { color: var(--testo-3); margin-top: 1px; }
.scheda-info a { color: var(--testo); text-underline-offset: 3px; }

.scheda-testo {
  margin-top: 16px;
  font-family: var(--font-titoli); font-size: 1.125rem; line-height: 1.6; color: var(--testo);
  max-width: 62ch;
}
.scheda-testo p + p { margin-top: 0.7em; }
.scheda-fonte { margin-top: 12px; font-size: var(--t-xs); color: var(--testo-3); font-style: italic; }

.scheda-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.scheda-cammino { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cammino {
  display: grid; gap: 2px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--linea); border-radius: var(--r-medio); background: var(--sup); color: var(--testo);
}
.cammino:hover { background: var(--sup-2); }
.cammino.dopo { text-align: right; }
.cammino small { color: var(--testo-3); font-size: var(--t-xs); }
.cammino b { font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-s); line-height: 1.2; }
.cammino:disabled { visibility: hidden; }

.anelli-legenda { margin-top: 10px; font-size: var(--t-xs); color: var(--testo-3); }

/* ---------- Segnaposto sulla mappa ---------- */

.segnaposto {
  position: absolute; width: 36px; height: 36px; padding: 0; border: 0; background: none;
  color: #fff; cursor: pointer;
  filter: drop-shadow(0 2px 1.5px rgba(16, 22, 44, 0.4)) drop-shadow(0 6px 8px rgba(16, 22, 44, 0.18));
  -webkit-tap-highlight-color: transparent;
}
.segnaposto .pietra {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--c); clip-path: var(--forma);
  transition: transform 0.28s var(--curva);
}
.segnaposto .pietra::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.2));
}
.segnaposto .pietra .icona { position: relative; }
.segnaposto:hover .pietra, .segnaposto:focus-visible .pietra { transform: scale(1.14); }
.segnaposto:focus-visible { outline: none; }
.segnaposto:focus-visible::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2.5px solid var(--accento);
}
.segnaposto.attivo { z-index: 5; }
.segnaposto.attivo .pietra { transform: scale(1.32); }

.segnaposto .etichetta {
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 2px 8px; border-radius: 7px;
  background: var(--sup); color: var(--testo);
  font-size: 12.5px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  box-shadow: var(--ombra-piccola);
  pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.segnaposto:hover .etichetta, .segnaposto:focus-visible .etichetta, .segnaposto.attivo .etichetta, .segnaposto.con-data .etichetta { opacity: 1; }
.segnaposto .numero {
  position: absolute; right: -6px; top: -6px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sup); color: var(--testo);
  font-size: 11px; font-weight: 700; font-variant-numeric: lining-nums;
  box-shadow: var(--ombra-piccola);
}

/* Entrata e uscita: il paese si ripopola */
.segnaposto.entra .pietra { animation: posa 0.55s cubic-bezier(0.2, 0.8, 0.25, 1.25) both; animation-delay: var(--ritardo, 0ms); }
.segnaposto.entra .etichetta { animation: appari 0.4s ease both; animation-delay: calc(var(--ritardo, 0ms) + 0.25s); }
@keyframes posa {
  from { transform: translateY(-18px) scale(0.3); opacity: 0; }
  60% { transform: translateY(2px) scale(1.08); opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes appari { from { opacity: 0; } }
.segnaposto.esce { pointer-events: none; }
.segnaposto.esce .pietra { animation: leva 0.28s ease-in both; }
.segnaposto.esce .etichetta { opacity: 0; }
@keyframes leva { to { transform: scale(0.2); opacity: 0; } }

/* Di sera i segnaposto sono lanterne */
body[data-atmosfera="notte"] .segnaposto {
  filter: drop-shadow(0 0 6px rgba(255, 196, 92, 0.75)) drop-shadow(0 0 18px rgba(255, 170, 60, 0.35));
}
/* In archivio: fatti futuri appena accennati */
.segnaposto.futuro { filter: none; }
.segnaposto.futuro .pietra { background: transparent; transform: scale(0.62); }
.segnaposto.futuro .pietra::before { background: none; box-shadow: none; }
.segnaposto.futuro .pietra::after {
  content: ""; position: absolute; inset: 18%; background: var(--c); opacity: 0.45; clip-path: var(--forma);
}
.segnaposto.futuro .pietra .icona { display: none; }
.segnaposto.passato .pietra { filter: saturate(0.55) brightness(1.05); }

/* ---------- Cursori (mesi e linea del tempo) ---------- */

.cursore {
  position: fixed; z-index: 9;
  left: calc(var(--colonna) + var(--margine) * 3); right: 76px; bottom: var(--margine);
  max-width: 820px; margin: 0 auto;
  padding: 12px 20px 10px;
  background: var(--sup); color: var(--testo);
  border-radius: var(--r-grande); box-shadow: var(--ombra);
  animation: sale 0.5s var(--curva);
}
@keyframes sale { from { opacity: 0; transform: translateY(16px); } }
.cursore-testa { display: flex; align-items: center; gap: 12px; }
.cursore-titolo {
  flex: 1; min-width: 0;
  font-family: var(--font-titoli); font-weight: 800; font-size: var(--t-xl); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cursore-titolo small { font-family: var(--font-testo); font-weight: 400; font-size: var(--t-s); color: var(--testo-2); margin-left: 8px; }
.cursore-anno { display: flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: lining-nums; }
.cursore-anno span { min-width: 3.2ch; text-align: center; }
.cursore-pista { position: relative; margin-top: 6px; --r: 11px; }

.istogramma { position: relative; height: 34px; }
.istogramma .barra {
  position: absolute; bottom: 0; width: 18px; transform: translateX(-50%);
  left: calc(var(--r) + (100% - 2 * var(--r)) * var(--i) / 11);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 2px;
}
.istogramma .barra i {
  display: block; width: 14px; height: 7px; background: var(--testo-3); opacity: 0.55;
  clip-path: polygon(6% 10%, 92% 0%, 100% 86%, 0% 100%);
}
.istogramma .barra.scelta i { background: var(--accento); opacity: 1; }
body[data-atmosfera="notte"] .istogramma .barra.scelta i { box-shadow: 0 0 10px rgba(226, 179, 61, 0.8); }

.tacche { position: relative; height: 18px; margin-top: 2px; }
.tacche span {
  position: absolute; top: 0; transform: translateX(-50%);
  left: calc(var(--r) + (100% - 2 * var(--r)) * var(--i) / var(--n, 11));
  font-size: var(--t-xs); color: var(--testo-3); white-space: nowrap;
  cursor: pointer; padding: 0 2px;
}
.tacche span.scelta { color: var(--testo); font-weight: 700; }

/* input range su misura */
.cursore input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 22px; margin: 0; background: transparent;
}
.cursore input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--sup-3); }
.cursore input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--sup-3); }
.cursore input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px; border: 3px solid var(--sup); border-radius: 50%;
  background: var(--accento); box-shadow: var(--ombra-piccola); cursor: grab;
}
.cursore input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border: 3px solid var(--sup); border-radius: 50%;
  background: var(--accento); box-shadow: var(--ombra-piccola); cursor: grab;
}
.cursore input[type="range"]:focus-visible { outline: none; }
.cursore input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 35%, transparent); }
.cursore input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accento) 35%, transparent); }

.epoche { position: relative; height: 26px; margin-bottom: 2px; }
.epoca {
  position: absolute; bottom: 4px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--c);
  white-space: nowrap; overflow: hidden;
}
.epoca::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 3px; border-radius: 2px;
  background: var(--c); opacity: 0.7;
}
.storia-punto {
  position: absolute; top: 3px; width: 9px; height: 9px; transform: translateX(-50%);
  left: calc(var(--r) + (100% - 2 * var(--r)) * var(--i) / var(--n));
  background: var(--c); clip-path: polygon(10% 20%, 60% 0%, 100% 40%, 80% 100%, 20% 90%, 0% 55%);
  cursor: pointer;
}
.cursore-storia .tacche { height: 14px; }
.racconta { min-height: 36px; padding: 0.35em 0.9em 0.35em 0.7em; }

/* ---------- Comandi mappa ---------- */

.comandi {
  position: fixed; z-index: 9; top: var(--margine); right: var(--margine);
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity 0.6s var(--curva);
}
.comandi .bottone-icona { box-shadow: var(--ombra-piccola); border-color: transparent; }
.comandi .ago { transition: transform 0.2s; }
.testo-3d { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; }

.maplibregl-ctrl-bottom-right { z-index: 8; }
.maplibregl-ctrl-attrib { font-family: var(--font-testo); font-size: 11px; }
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: color-mix(in srgb, var(--sup) 82%, transparent); color: var(--testo-2); }
.maplibregl-ctrl-attrib a { color: var(--testo-2); }
.maplibregl-ctrl-attrib.maplibregl-compact { margin: 0 var(--margine) var(--margine) 0; }

/* ---------- Avvisi ---------- */

.avviso-bozza {
  position: fixed; z-index: 20; top: var(--margine);
  left: calc(var(--colonna) + var(--margine) * 3); right: 76px;
  display: flex; justify-content: center; pointer-events: none;
}
.avviso-bozza > div {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 16px; border-radius: var(--r-pillola);
  background: var(--reseda); color: #241B04; box-shadow: var(--ombra);
  font-size: var(--t-s); font-weight: 500; line-height: 1.25;
}
.avviso-bozza button { border: 0; background: rgba(36, 27, 4, 0.12); color: inherit; padding: 6px 12px; border-radius: var(--r-pillola); font-weight: 700; font-size: var(--t-s); }
.avviso-bozza button:hover { background: rgba(36, 27, 4, 0.22); }

.errore-caricamento {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: var(--sup);
}
.errore-caricamento div { max-width: 46ch; }
.errore-caricamento h2 { font-size: var(--t-2xl); margin-bottom: 10px; }
.errore-caricamento p + p { margin-top: 8px; color: var(--testo-2); }

/* ---------- Apertura ---------- */

.velo {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end;
  padding: clamp(24px, 6vw, 84px);
  background: linear-gradient(100deg, rgba(250, 250, 247, 0.97) 0%, rgba(250, 250, 247, 0.9) 34%, rgba(250, 250, 247, 0.35) 62%, rgba(250, 250, 247, 0) 82%);
  transition: opacity 0.9s var(--curva), visibility 0.9s;
}
.velo.chiude { opacity: 0; visibility: hidden; pointer-events: none; }
.velo-testo { max-width: 640px; }
.velo-nome {
  font-weight: 800; font-size: clamp(4.2rem, 11.5vw, 9.6rem); line-height: 0.86; letter-spacing: -0.025em;
  color: var(--guado);
  padding-bottom: 0.18em;
  background-image: linear-gradient(90deg, var(--guado) 0 60%, transparent 60% 100%);
  background-size: 22px 3px; background-repeat: repeat-x; background-position: 0 100%;
}
.velo-sottotitolo {
  margin-top: 26px;
  font-family: var(--font-titoli); font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; color: var(--testo);
  max-width: 28ch;
}
.velo-presentazione { margin-top: 14px; color: var(--testo-2); font-size: var(--t-m); max-width: 46ch; }
.velo-azioni { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.velo-scorciatoie { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--testo-3); font-size: var(--t-s); }
.velo-scorciatoie span { margin-right: 4px; }
.velo-scorciatoie button {
  border: 0; background: none; padding: 8px 8px; border-radius: 8px;
  font-weight: 700; color: var(--testo); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.velo-scorciatoie button:hover { text-decoration-color: var(--enfasi); }

body.intro-aperta .colonna,
body.intro-aperta .comandi,
body.intro-aperta .cursore,
body.intro-aperta .avviso-bozza { opacity: 0; pointer-events: none; visibility: hidden; }
body.intro-aperta .colonna { transform: translateX(-24px); }
body.intro-aperta .maplibregl-ctrl-bottom-right { opacity: 0.6; }
body.in-caricamento .colonna, body.in-caricamento .comandi { opacity: 0; }

/* ==========================================================
   Schermi piccoli: testata in alto, foglio scorrevole in basso
   ========================================================== */
@media (max-width: 760px) {
  :root { --margine: 10px; }
  .colonna { display: contents; }

  .testata {
    position: fixed; z-index: 12; top: 0; left: 0; right: 0;
    border-radius: 0 0 var(--r-grande) var(--r-grande);
    padding: calc(env(safe-area-inset-top) + 8px) 10px 8px;
  }
  .marchio-nome { font-size: 1.45rem; }
  .marchio-prov { display: none; }
  .ricerca input { height: 38px; }
  .modi { margin-top: 8px; }
  .modi button { flex-direction: column; gap: 1px; min-height: 46px; font-size: 13px; padding: 4px 2px; }

  .foglio {
    position: fixed; z-index: 11; left: 0; right: 0; bottom: 0;
    height: calc(100dvh - var(--testata-h) - 8px);
    border-radius: var(--r-grande) var(--r-grande) 0 0;
    transform: translateY(calc(100% - var(--foglio-visibile)));
    transition: transform 0.38s var(--curva), background-color var(--durata), color var(--durata);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .foglio.trascina { transition: none; }
  .maniglia {
    display: grid; place-items: center; flex: none;
    width: 100%; height: 26px; border: 0; background: transparent; touch-action: none; cursor: grab;
  }
  .maniglia span { width: 44px; height: 5px; border-radius: 3px; background: var(--sup-3); }
  .corpo { padding: 2px 16px 12px; }
  .foglio[data-foglio="basso"] .corpo { overflow: hidden; }
  .piede { padding: 8px 16px 10px; }

  .sezione-titolo { font-size: var(--t-xl); }
  .sezione-testa { margin-bottom: 10px; }

  .cursore {
    left: 8px; right: 8px; max-width: none;
    bottom: calc(var(--foglio-visibile) + 8px);
    padding: 8px 12px 6px;
    transition: bottom 0.38s var(--curva), opacity 0.3s, background-color var(--durata), color var(--durata);
  }
  .foglio-alto .cursore { opacity: 0; pointer-events: none; }
  .cursore-titolo { font-size: var(--t-l); }
  .istogramma { height: 24px; }
  .istogramma .barra i { height: 5px; width: 11px; }
  .racconta span:last-child { display: none; }
  .racconta { padding: 0; width: 36px; justify-content: center; }

  .comandi { top: calc(var(--testata-h) + 10px); right: 10px; }
  #zoomPiu, #zoomMeno { display: none; }
  .comandi .bottone-icona { width: 40px; height: 40px; }

  .maplibregl-ctrl-bottom-right { bottom: calc(var(--foglio-visibile)); transition: bottom 0.38s var(--curva); }
  .avviso-bozza { top: calc(var(--testata-h) + 10px); left: 10px; right: 60px; justify-content: flex-start; }
  .avviso-bozza > div { border-radius: var(--r-medio); padding: 6px 6px 6px 12px; font-size: var(--t-xs); }

  .velo {
    align-items: flex-end;
    padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(250, 250, 247, 0.98) 0%, rgba(250, 250, 247, 0.92) 48%, rgba(250, 250, 247, 0.2) 78%, rgba(250, 250, 247, 0) 100%);
  }
  .velo-sottotitolo { margin-top: 18px; }
  .velo-azioni { margin-top: 22px; }
  .velo-azioni .bottone.grande { width: 100%; }
  .scheda-copertina .anno-grande { font-size: 2.6rem; }
  .scheda-copertina.generata { display: none; }
  .notifica { bottom: calc(var(--foglio-visibile) + 16px); }
}

@media (max-width: 760px) and (max-height: 560px) {
  .velo-presentazione { display: none; }
}