/* =====================================================================
   UITUIT - IL PIANETA (tutto ciò che sta dentro #mondo, tranne il titolo)
   Vetro scuro, testo crema, accenti oro. I colori di riserva servono se
   stile.css non è ancora caricato.
   ===================================================================== */
.pi-app, .pi-velo, .pi-toast {
  --p-oro: var(--oro, #D9A441); --p-oro-chiaro: var(--oro-chiaro, #F3D28B); --p-ambra: var(--ambra, #E07A3F);
  --p-blu: var(--blu, #4F8EF7); --p-crema: var(--crema, #F3E9DC); --p-tenue: var(--tenue, #A99D90);
  --p-vetro: rgba(11,13,20,.66); --p-bordo: rgba(255,255,255,.09); --p-bordo-oro: rgba(217,164,65,.32);
  --p-titolo: 'Cormorant Garamond', Georgia, serif; --p-testo: Poppins, system-ui, sans-serif; --p-mono: 'JetBrains Mono', ui-monospace, monospace;
  --p-entra: cubic-bezier(.22,1,.36,1); --p-muovi: cubic-bezier(.25,1,.5,1);
}
.pi-app {
  --pi-x: 50%; --pi-y: 50%; --pi-r: 260px;
  position: absolute; inset: 0; color: var(--p-crema); font-family: var(--p-testo);
  /* Lo spazio: nero profondo, appena più chiaro intorno alla Terra (non dipende dal colore della pagina) */
  background: radial-gradient(90% 80% at var(--pi-x) var(--pi-y), #0a0f1c 0%, #05070d 48%, #030407 100%);
}
.pi-app button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pi-app svg, .pi-velo svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pi-app :focus-visible, .pi-velo :focus-visible { outline: 2px solid var(--p-oro-chiaro); outline-offset: 3px; }

/* Vetro scuro comune a tutti i controlli */
.pi-pillola, .pi-legenda, .pi-strumenti, .pi-zoom, .pi-tempo, .pi-campo, .pi-risultati, .pi-esplora, .pi-esci {
  background: var(--p-vetro); border: 1px solid var(--p-bordo);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- Cielo stellato, Terra 3D e medaglioni ---------- */
.pi-stelle { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.pi-terra { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.1s var(--p-muovi); }
.pi-app.terra-pronta .pi-terra { opacity: 1; }
/* Dopo la prima comparsa la Terra non sfuma più: nei passaggi con la mappa è la mappa a sfumare sopra di lei */
.pi-app.gia-vista .pi-terra { transition: none; }
.pi-terra-tela { display: block; width: 100%; height: 100%; outline: none; cursor: grab;
  /* Sul telefono il dito in verticale scorre la pagina; in orizzontale gira la Terra */
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.pi-terra-tela.trascino { cursor: grabbing; }
.pi-terra-tela:focus-visible { outline: 2px solid var(--p-oro-chiaro); outline-offset: -6px; border-radius: 12px; }
body.pianeta-esplora .pi-terra-tela { touch-action: none; }
/* Medaglioni sopra la Terra: il contenitore lo muove il codice (niente transizioni su di lui) */
.pi-segni { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .8s var(--p-muovi) .3s; }
.pi-app.terra-pronta .pi-segni { opacity: 1; }
.pi-segni .pi-segnaposto { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; pointer-events: auto; touch-action: manipulation; }
.pi-segni .pi-segnaposto > .pi-uit { position: absolute; left: -23px; top: -23px; }
.pi-segni .pi-segnaposto > .pi-uit-demo { position: absolute; left: -11px; top: -11px; }
/* Gruppo di UIT vicini: una pila di foto con il numero */
.pi-pila { position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; transition: transform .25s var(--p-entra), opacity .2s; }
.pi-pila .pi-uit { position: absolute; inset: 0; }
.pi-pila .pi-uit.p1 { transform: translate(8px, -7px) scale(.84); filter: brightness(.8); }
.pi-pila .pi-uit.p2 { transform: translate(15px, -12px) scale(.7); filter: brightness(.62); }
.pi-numero { position: absolute; right: -9px; bottom: -6px; z-index: 2; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--p-oro-chiaro), var(--p-oro)); color: #17120a; font: 600 11px/1 var(--p-mono); box-shadow: 0 0 0 2px #0b0c12, 0 4px 10px rgba(0,0,0,.5); }
.pi-gruppo .pi-pila .pi-etichetta { z-index: 3; }
.pi-segnaposto:focus-visible .pi-pila .pi-uit:last-of-type { box-shadow: 0 0 0 2px var(--p-oro-chiaro), 0 0 30px rgba(217,164,65,.8); }
.pi-segnaposto:focus-visible .pi-pila .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .pi-gruppo:not(.aperto):hover .pi-pila { transform: scale(1.1); }
  .pi-gruppo:not(.aperto):hover .pi-pila .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
}
/* Aperto: le foto si aprono a ventaglio intorno al punto */
.pi-gruppo.aperto .pi-pila { transform: scale(.62); opacity: .5; }
.pi-gruppo.aperto .pi-pila .pi-etichetta { opacity: 0 !important; }
.pi-ventaglio { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.pi-petalo { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  opacity: 0; transform: scale(.4); pointer-events: none;
  transition: transform .34s var(--p-entra) var(--ritardo, 0ms), opacity .2s ease var(--ritardo, 0ms); }
.pi-petalo .pi-uit { width: 44px; height: 44px; }
.pi-gruppo.aperto .pi-petalo { opacity: 1; transform: translate(var(--dx), var(--dy)); pointer-events: auto; }
.pi-petalo:focus-visible { outline: none; }
.pi-petalo:focus-visible .pi-uit { box-shadow: 0 0 0 2px var(--p-oro-chiaro), 0 0 26px rgba(217,164,65,.8); }
.pi-petalo:focus-visible .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .pi-petalo:hover .pi-uit { transform: scale(1.12); }
  .pi-petalo:hover .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
  .pi-petalo:hover { z-index: 2; }
}

/* Riga dell'ora sotto la Terra: «Ora in Italia 21:40 · notte su Napoli» */
.pi-ora { position: absolute; z-index: 4; left: var(--pi-x); top: calc(var(--pi-y) + var(--pi-r) + 16px); transform: translateX(-50%); margin: 0;
  display: flex; align-items: center; gap: 9px; white-space: nowrap; pointer-events: none;
  font: 500 11px/1 var(--p-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243,233,220,.62);
  text-shadow: 0 1px 10px #000; opacity: 0; transition: opacity .6s; }
.pi-ora svg { width: 14px; height: 14px; color: var(--p-oro-chiaro); flex: none; }
.pi-ora .pi-ora-sep { color: var(--p-oro); }
.pi-ora-post { display: none; }
.pi-app.terra-pronta.modo-terra:not(.vicino) .pi-ora { opacity: 1; }

/* «Torna alla Terra» (solo nella mappa, quando la Terra c'è) */
.pi-torna { display: none; position: absolute; z-index: 8; top: 18px; left: clamp(16px, 2.4vw, 32px); align-items: center; gap: 9px; min-height: 44px; padding: 0 18px 0 14px;
  border-radius: 999px; color: var(--p-crema); font: 500 14px var(--p-testo); border: 1px solid var(--p-bordo-oro);
  background: var(--p-vetro); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05); transition: border-color .15s, transform .12s var(--p-entra); }
.pi-torna svg { color: var(--p-oro-chiaro); }
.pi-torna:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pi-torna:hover { border-color: var(--p-oro); } }
.pi-app.modo-mappa:not(.senza-terra) .pi-torna { display: inline-flex; }

/* Cosa si vede in ciascun modo */
.pi-app.modo-terra .solo-mappa, .pi-app.modo-mappa .solo-terra { display: none !important; }
.pi-app.modo-mappa:not(.senza-terra) .pi-terra { opacity: 0; visibility: hidden; transition: opacity 0s linear .6s, visibility 0s linear .6s; }
.pi-app.modo-mappa .pi-segni { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.pi-app.modo-mappa:not(.senza-terra) .pi-aura { opacity: 0; }
/* Con la Terra vera l'alone è solo un respiro azzurro (l'atmosfera la disegna il 3D) */
.pi-app.modo-terra .pi-aura { background: radial-gradient(circle closest-side, rgba(79,142,247,.12) 62%, rgba(79,142,247,.05) 72%, transparent 92%); }

/* ---------- Mappa, aura e pianeta segnaposto ---------- */
.pi-mappa { position: absolute; inset: 0; z-index: 2; background: transparent;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--p-muovi), visibility 0s linear .6s; }
.pi-app.modo-mappa .pi-mappa { opacity: 1; visibility: visible; transition: opacity .6s var(--p-muovi); }
.pi-mappa .maplibregl-canvas { outline: none; }
/* Da tastiera il pianeta si muove con le frecce: deve vedersi che ha il fuoco */
.pi-mappa .maplibregl-canvas:focus-visible { outline: 2px solid var(--p-oro-chiaro); outline-offset: -6px; border-radius: 12px; }
.pi-aura, .pi-attesa { position: absolute; left: var(--pi-x); top: var(--pi-y); width: calc(var(--pi-r) * 2.9); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
/* Alone blu e oro intorno al globo (dietro la mappa trasparente) */
.pi-aura { z-index: 0; border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(79,142,247,.20) 62%, rgba(217,164,65,.10) 70%, rgba(217,164,65,.035) 82%, transparent 100%);
  transition: opacity .6s; }
.pi-app.vicino .pi-aura { opacity: 0; }
/* Sfera leggera in CSS finché la mappa non arriva */
.pi-attesa { z-index: 2; display: grid; place-items: center; transition: opacity .7s; }
.pi-sfera { width: 69%; aspect-ratio: 1; border-radius: 50%;
  /* foto vera del pianeta (img/pianeta.webp): si vede subito, anche se il 3D non parte */
  background: url(../img/pianeta.webp) center / 118% no-repeat, radial-gradient(circle at 34% 30%, #1b2a4a 0%, #0b1428 38%, #060a14 70%, #04060c 100%);
  box-shadow: 0 0 0 1px rgba(143,184,255,.16), 0 0 50px rgba(79,142,247,.28), 0 0 120px rgba(217,164,65,.10), inset -30px -40px 80px rgba(0,0,0,.6); }
.pi-app.pronto .pi-attesa, .pi-app.spento .pi-attesa { opacity: 0; }
.pi-app.spento > :not(.pi-senza-rete):not(.pi-aura):not(.pi-attesa):not(.pi-stelle) { display: none; }
.pi-app.spento .pi-attesa { opacity: .55; }

/* ---------- Pillole dei contatori ---------- */
.pi-pillole { position: absolute; right: clamp(16px, 2.4vw, 32px); top: 18px; z-index: 7; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
.pi-pillola { font: 500 11.5px/1 var(--p-mono); letter-spacing: .14em; color: var(--p-oro-chiaro); border-color: var(--p-bordo-oro); border-radius: 999px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.pi-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--p-oro-chiaro); box-shadow: 0 0 10px var(--p-oro); animation: pi-batte 2s ease-in-out infinite; }
@keyframes pi-batte { 50% { opacity: .35; } }

/* ---------- Legenda ---------- */
.pi-legenda { position: absolute; right: clamp(16px, 2.4vw, 32px); top: 64px; z-index: 6; font: 11px/1.3 var(--p-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--p-tenue); border-radius: 14px; padding: 11px 14px; display: grid; gap: 7px; transition: opacity .2s; }
.pi-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; vertical-align: -1px; }
.pi-legenda .l-uit { background: conic-gradient(var(--p-oro-chiaro), var(--p-ambra), var(--p-oro-chiaro)); box-shadow: 0 0 8px var(--p-oro); }
.pi-legenda .l-locale { background: #F2A65A; } .pi-legenda .l-viagg { background: #8FB8FF; }
.pi-legenda .l-filo { height: 0; border-top: 1.5px dashed var(--p-oro-chiaro); border-radius: 0; width: 12px; }
.pi-legenda .l-luogo { background: var(--p-crema); box-shadow: 0 0 7px rgba(243,210,139,.8); }
.pi-legenda .l-luci { width: 7px; height: 7px; margin: 0 10px 0 1px; background: #FFD08A; box-shadow: 0 0 6px 2px rgba(255,160,60,.75); }
.pi-app:not(.con-esempi) .solo-esempi, .pi-app:not(.con-radici) .solo-radici { display: none !important; }
.pi-app.esplorato .pi-legenda { opacity: .85; }

/* ---------- Ricerca ---------- */
.pi-cerca { position: absolute; left: 50%; top: 18px; transform: translate(-50%, -6px); z-index: 8; width: min(420px, calc(100% - 32px)); opacity: 0; visibility: hidden; transition: opacity .18s, transform .2s var(--p-entra), visibility 0s linear .2s; }
.pi-cerca.vis { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s, transform .2s var(--p-entra); }
.pi-campo { display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 0 14px; border-color: var(--p-bordo-oro); }
.pi-campo svg { color: var(--p-oro); flex: none; }
.pi-campo input { flex: 1; min-width: 0; height: 48px; font: 16px var(--p-testo); background: transparent; color: var(--p-crema); border: 0; outline: none; }
.pi-campo input::placeholder { color: var(--p-tenue); }
.pi-campo:focus-within { border-color: var(--p-oro); }
/* Il fuoco si vede sul bordo del campo: niente secondo anello dentro (sembrava un riquadro rotto) */
.pi-campo input:focus-visible { outline: none; }
.pi-campo:focus-within { box-shadow: 0 0 0 3px rgba(217,164,65,.22), 0 10px 30px rgba(0,0,0,.35); }
.pi-risultati { border-radius: 14px; margin-top: 6px; max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.pi-risultati:empty { display: none; }
.pi-risultato { display: flex; flex-direction: column; width: 100%; text-align: left; background: none; border: 0; color: var(--p-crema); padding: 10px 16px; font-size: 14.5px; border-bottom: 1px solid rgba(255,255,255,.05); min-height: 44px; justify-content: center; transition: background-color .15s; }
.pi-risultato small { color: var(--p-tenue); font-size: 12px; }
.pi-risultato:hover, .pi-risultato:focus-visible { background: rgba(217,164,65,.14); outline: none; }
.pi-nessuno { padding: 12px 16px; color: var(--p-tenue); font-size: 14px; }

/* ---------- Strumenti e zoom ---------- */
.pi-strumenti { position: absolute; left: clamp(16px, 2.4vw, 32px); bottom: 22px; z-index: 7; display: flex; gap: 4px; border-radius: 18px; padding: 5px; }
.pi-strumenti button, .pi-zoom button { width: 44px; height: 44px; border-radius: 13px; border: 1px solid transparent; background: none; color: #bfb4a7; display: grid; place-items: center; position: relative; transition: color .15s, background-color .15s, border-color .15s, transform .12s var(--p-entra); }
.pi-strumenti button:active, .pi-zoom button:active { transform: scale(.94); }
.pi-strumenti button.on { color: var(--p-oro-chiaro); border-color: var(--p-bordo-oro); background: rgba(217,164,65,.12); }
.pi-sep { width: 1px; background: rgba(255,255,255,.1); margin: 8px 3px; }
@media (hover: hover) and (pointer: fine) {
  .pi-strumenti button:hover, .pi-zoom button:hover { color: var(--p-crema); background: rgba(255,255,255,.06); }
  .pi-strumenti button[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font: 10.5px/1 var(--p-mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(8,9,14,.92); color: var(--p-crema); padding: 7px 9px; border-radius: 8px; border: 1px solid var(--p-bordo); opacity: 0; pointer-events: none; transition: opacity .12s, transform .15s var(--p-entra); }
  .pi-strumenti button[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
  .pi-strumenti button:first-child::after { left: 0; transform: translate(0, 4px); }
  .pi-strumenti button:first-child:hover::after { transform: none; }
}
.pi-zoom { position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: 104px; z-index: 7; display: flex; flex-direction: column; border-radius: 16px; padding: 4px; gap: 2px; }

/* ---------- Macchina del tempo: una pellicola ---------- */
.pi-tempo { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; width: min(600px, calc(100% - 760px)); min-width: 380px; border-radius: 18px; padding: 10px 12px 10px; }
.pi-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; font: 10.5px/1.2 var(--p-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--p-tenue); }
.pi-riga b { color: var(--p-oro-chiaro); font-weight: 600; }
.pi-conta { letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.pi-pellicola { position: relative; margin-top: 8px; padding: 7px 0; border-radius: 10px; background: rgba(0,0,0,.35);
  /* Le perforazioni della pellicola, sopra e sotto */
  background-image: radial-gradient(circle, rgba(243,233,220,.16) 1.3px, transparent 1.6px), radial-gradient(circle, rgba(243,233,220,.16) 1.3px, transparent 1.6px);
  background-size: 11px 7px; background-position: 0 0, 0 100%; background-repeat: repeat-x; }
.pi-decenni { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0 4px; }
.pi-decenni::-webkit-scrollbar { display: none; }
.pi-fotogramma { flex: 1 0 auto; min-width: 76px; min-height: 40px; scroll-snap-align: center; background: rgba(255,255,255,.03); color: var(--p-crema); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 10px; font: 500 13px var(--p-mono); letter-spacing: .04em; transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s; }
.pi-fotogramma.attivo { background: linear-gradient(160deg, var(--p-oro-chiaro), var(--p-oro)); color: #17120a; border-color: var(--p-oro-chiaro); font-weight: 600; box-shadow: 0 0 18px rgba(217,164,65,.35); }
@media (hover: hover) and (pointer: fine) { .pi-fotogramma:not(.attivo):hover { border-color: var(--p-bordo-oro); color: var(--p-oro-chiaro); } }

/* ---------- Bottoni del telefono (Esplora / Chiudi) ---------- */
.pi-esplora, .pi-esci { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; color: var(--p-crema); font: 500 15px var(--p-testo); border-color: var(--p-bordo-oro); }
.pi-esplora svg, .pi-esci svg { color: var(--p-oro-chiaro); }

/* ---------- Segnaposto degli UIT: medaglioni di luce ---------- */
/* Il contenitore (.pi-segnaposto) lo muove la mappa: niente transizioni su di lui. */
.pi-segnaposto { cursor: pointer; }
.pi-segnaposto:focus-visible { outline: none; }
.pi-segnaposto:focus-visible > .pi-uit, .pi-segnaposto:focus-visible > .pi-uit-demo { box-shadow: 0 0 0 2px var(--p-oro-chiaro), 0 0 30px rgba(217,164,65,.8); }
.pi-uit { width: 46px; height: 46px; border-radius: 50%; padding: 2px; position: relative;
  background: conic-gradient(from 210deg, #F3D28B, #D9A441, #E07A3F, #F3D28B);
  box-shadow: 0 0 0 1px rgba(243,210,139,.25), 0 0 18px rgba(217,164,65,.55), 0 6px 18px rgba(0,0,0,.5);
  transition: transform .2s var(--p-entra); }
.pi-uit img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #0b0c12; display: block; background: #1a1610; }
.pi-onda { position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(243,210,139,.8); opacity: 0; animation: pi-onda 2.8s var(--p-entra) infinite; pointer-events: none; }
@keyframes pi-onda { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.pi-etichetta { position: absolute; top: calc(100% + 9px); left: 50%; transform: translate(-50%, -4px); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  font: 600 11px/1 var(--p-mono); letter-spacing: .05em; color: var(--p-crema); background: rgba(8,9,14,.9); border: 1px solid rgba(217,164,65,.4); padding: 6px 9px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .15s, transform .2s var(--p-entra); }
.pi-segnaposto:focus-visible > div > .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) {
  .pi-segnaposto:hover > .pi-uit { transform: scale(1.14); }
  .pi-segnaposto:hover > .pi-uit-demo { transform: scale(1.3); }
  .pi-segnaposto:hover > div > .pi-etichetta { opacity: 1; transform: translate(-50%, 0); }
  .pi-segnaposto:hover { z-index: 3; }
}
.pi-uit-demo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; position: relative; box-shadow: 0 0 16px currentColor; transition: transform .2s var(--p-entra); }
.pi-uit-demo.locale { background: #F2A65A; color: #F2A65A; }
.pi-uit-demo.viaggiatore { background: #8FB8FF; color: #8FB8FF; }

/* ---------- Pannello del luogo (vetro scuro) ---------- */
.pi-pannello { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(400px, calc(100% - 32px)); z-index: 9; display: flex; flex-direction: column;
  background: rgba(10,12,18,.8); border: 1px solid var(--p-bordo); border-radius: 22px; overflow: hidden;
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateX(calc(100% + 40px)); visibility: hidden; transition: transform .3s var(--p-muovi), visibility 0s linear .3s; }
.pi-pannello.aperto { transform: none; visibility: visible; transition: transform .3s var(--p-muovi); }
.pi-maniglia { display: none; }
.pi-scorri { overflow-y: auto; overscroll-behavior: contain; flex: 1; scrollbar-width: thin; scrollbar-color: rgba(217,164,65,.3) transparent; }
.pi-x { position: absolute; right: 12px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(8,9,14,.6); color: var(--p-crema); display: grid; place-items: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .15s, color .15s; }
@media (hover: hover) and (pointer: fine) { .pi-x:hover { border-color: var(--p-oro); color: var(--p-oro-chiaro); } }
.pi-foto, .pi-copertina { margin: 0; position: relative; overflow: hidden; }
.pi-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; opacity: 0; transition: opacity .4s; background: linear-gradient(135deg, #10131c, #2a2030); }
.pi-foto.caricata img { opacity: 1; }
.pi-foto:not(.caricata) img { aspect-ratio: 16 / 4; }
/* Foto in arrivo: segnaposto che respira; il credito compare solo con la foto (prima restava "orfano" sopra uno spazio vuoto) */
.pi-foto.attesa:not(.caricata) { background: linear-gradient(110deg, #10131c 30%, #221c26 50%, #10131c 70%) 0 0 / 300% 100%; animation: pi-respira 1.6s ease-in-out infinite; }
@keyframes pi-respira { from { background-position: 100% 0; } to { background-position: 0 0; } }
.pi-foto:not(.caricata) .pi-credito, .pi-copertina:not(.caricata) .pi-credito:has(a) { visibility: hidden; }
.pi-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(transparent, rgba(10,12,18,.95)); pointer-events: none; }
.pi-credito { position: absolute; left: 14px; right: 14px; bottom: 8px; z-index: 1; font-size: 11px; line-height: 1.4; color: rgba(243,233,220,.78); }
.pi-credito:empty { display: none; }
.pi-credito a { color: var(--p-oro-chiaro); text-decoration: none; border-bottom: 1px solid rgba(243,210,139,.35); }
.pi-testa { padding: 6px 22px 12px; }
.pi-sotto { font: 10.5px/1.5 var(--p-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--p-oro); padding-right: 40px; }
.pi-testa h2 { font: 600 clamp(32px, 3vw, 40px)/1.05 var(--p-titolo); color: var(--p-crema); margin: 6px 0 0; }
.pi-pannello:not(:has(.pi-foto.caricata)) .pi-testa { padding-top: 22px; }
.pi-lista { padding: 4px 14px 22px; display: grid; gap: 10px; }
.pi-scheda { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; color: var(--p-crema); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 10px; transition: border-color .18s, background-color .18s, transform .18s var(--p-entra); }
@media (hover: hover) and (pointer: fine) { .pi-scheda:hover { border-color: var(--p-bordo-oro); background: rgba(217,164,65,.07); transform: translateY(-1px); } }
.pi-mini { width: 84px; height: 64px; border-radius: 11px; object-fit: cover; background: linear-gradient(135deg, #1b1f2e, #6b3a22); display: block; }
.pi-scheda h3 { font: 600 20px/1.12 var(--p-titolo); margin: 3px 0 4px; color: var(--p-crema); }
.pi-meta { font: 10.5px/1.4 var(--p-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--p-oro); }
.pi-tag { display: inline-block; font: 500 10px/1.5 var(--p-testo); letter-spacing: .02em; text-transform: none; padding: 1px 8px; margin-left: 6px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--p-crema); }
.pi-tag.vera { background: rgba(217,164,65,.18); color: var(--p-oro-chiaro); }
.pi-dove { font-size: 12.5px; color: var(--p-tenue); }
.pi-altre { font: 10.5px var(--p-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--p-tenue); margin: 10px 4px 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.07); }
.pi-vuoto { text-align: center; padding: 18px 12px 8px; color: var(--p-tenue); font-size: 15px; line-height: 1.55; }
.pi-vuoto p { margin: 0 0 6px; }
.pi-vuoto .pi-vuoto-titolo { font: 500 italic 23px/1.25 var(--p-titolo); color: var(--p-crema); margin-bottom: 10px; }
.pi-vuoto .pi-btn { margin-top: 14px; }

/* ---------- Bottoni ---------- */
.pi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: 999px; font: 500 15px var(--p-testo); text-decoration: none; transition: transform .15s var(--p-entra), box-shadow .2s, filter .2s; }
.pi-btn-oro { background: linear-gradient(160deg, #F3D28B, #D9A441 60%, #C98F2E); color: #17120a; box-shadow: 0 8px 24px rgba(217,164,65,.3); }
@media (hover: hover) and (pointer: fine) { .pi-btn-oro:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(217,164,65,.42); } }

/* ---------- Scheda della storia (arriva in prospettiva) ---------- */
.pi-velo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; perspective: 1400px;
  background: rgba(4,5,9,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s; }
.pi-velo[hidden] { display: none; }
.pi-velo.aperto { opacity: 1; }
.pi-storia { position: relative; width: 100%; max-width: 640px; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; color: var(--p-crema); font-family: var(--p-testo);
  background: linear-gradient(180deg, rgba(16,18,27,.94), rgba(9,10,15,.97)); border: 1px solid rgba(255,255,255,.1); border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(217,164,65,.08), inset 0 1px 0 rgba(255,255,255,.07);
  transform-origin: 50% 100%; transform: translateY(48px) rotateX(16deg) scale(.95); opacity: 0;
  transition: transform .5s var(--p-entra), opacity .3s; scrollbar-width: thin; scrollbar-color: rgba(217,164,65,.3) transparent; }
.pi-velo.aperto .pi-storia { transform: none; opacity: 1; }
.pi-copertina { border-radius: 22px 22px 0 0; }
.pi-copertina img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: linear-gradient(135deg, #10131c, #3a2a3f 60%, #E07A3F); transform: scale(1.1); opacity: 0; transition: transform 1.1s var(--p-entra), opacity .5s; }
.pi-copertina.caricata img { opacity: 1; }
.pi-velo.aperto .pi-copertina img { transform: none; }
.pi-copertina::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(transparent, rgba(12,13,20,.96)); pointer-events: none; }
.pi-corpo { padding: 4px 30px 30px; position: relative; }
.pi-corpo .pi-meta { font-size: 11px; letter-spacing: .14em; }
.pi-corpo h2 { font: 600 clamp(30px, 4.4vw, 42px)/1.08 var(--p-titolo); color: var(--p-crema); margin: 8px 0 14px; }
.pi-testo { font: 500 21px/1.5 var(--p-titolo); color: #E9DCCB; }
.pi-testo:empty { display: none; }
.pi-nota { font-size: 13.5px; line-height: 1.55; color: #B9AD9F; border-left: 2px solid #D9A441; padding: 10px 14px; background: rgba(217,164,65,.07); border-radius: 0 12px 12px 0; margin: 18px 0; }
.pi-nota b { color: #F3D28B; font-weight: 600; }
.pi-azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.pi-x-storia { right: 14px; top: 14px; position: absolute; }
.pi-storia .pi-credito { bottom: 10px; }

/* ---------- Avviso ---------- */
.pi-toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; transform: translate(-50%, 140px); max-width: calc(100% - 32px); text-align: center; padding: 12px 20px; border-radius: 999px;
  background: rgba(10,12,18,.92); border: 1px solid rgba(217,164,65,.35); color: var(--p-crema); font: 14px var(--p-testo); box-shadow: 0 14px 40px rgba(0,0,0,.5);
  transition: transform .3s var(--p-entra); pointer-events: none; }
.pi-toast.vis { transform: translate(-50%, 0); }

/* ---------- Senza internet o senza WebGL ---------- */
.pi-senza-rete { position: absolute; left: var(--pi-x); top: var(--pi-y); transform: translate(-50%, -50%); z-index: 8; width: min(440px, calc(100% - 32px)); text-align: center; padding: 26px 26px 22px; border-radius: 22px;
  background: var(--p-vetro); border: 1px solid var(--p-bordo-oro); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pi-senza-rete h2 { font: 600 30px/1.1 var(--p-titolo); color: var(--p-crema); margin: 0 0 10px; }
.pi-senza-rete p { margin: 0; color: var(--p-tenue); font-size: 15px; line-height: 1.6; }

/* ---------- Ritocchi dei controlli di MapLibre ---------- */
.pi-app .maplibregl-ctrl-attrib { background: rgba(8,9,14,.6) !important; color: #9d9285; font: 10.5px/1.5 var(--p-testo); }
.pi-app .maplibregl-ctrl-attrib a { color: #c9bcae; }
.pi-app .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 14px; }
.pi-app .maplibregl-ctrl-attrib-button { filter: invert(1) sepia(.4); opacity: .7; }
.pi-app .maplibregl-ctrl-bottom-right { z-index: 6; }
.pi-app .maplibregl-ctrl-attrib-inner { max-width: 300px; }
.pi-app .maplibregl-cooperative-gesture-screen { background: rgba(7,8,12,.55); color: var(--p-crema); font: 500 17px/1.4 var(--p-testo); padding: 24px; text-shadow: 0 2px 12px #000; }
.pi-app .maplibregl-marker { will-change: auto; }

/* ---------- Computer medio: strumenti sopra la pellicola ---------- */
@media (max-width: 1180px) and (min-width: 761px) {
  .pi-tempo { width: min(600px, calc(100% - 140px)); min-width: 0; }
  .pi-strumenti { bottom: 116px; }
  /* Le fonti della mappa finivano sotto la pellicola (tablet): salgono sopra, e lo zoom sale con loro */
  .pi-app .maplibregl-ctrl-bottom-right { bottom: 116px; }
  .pi-zoom { bottom: 184px; }
}

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  .pi-legenda, .pi-strumenti, .pi-zoom, .pi-tempo, .pi-cerca { display: none; }
  .pi-pillole { top: auto; bottom: 86px; left: 12px; right: 12px; justify-content: center; }
  .pi-pillola { font-size: 12px; padding: 7px 11px; letter-spacing: .1em; } /* sul telefono niente scritte sotto i 12 px */
  .pi-esplora { display: inline-flex; position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 7; white-space: nowrap; }
  .pi-esplora:active { transform: translateX(-50%) scale(.97); }
  .pi-app .maplibregl-ctrl-bottom-right { bottom: 124px; }
  .pi-app .maplibregl-ctrl-attrib-inner { max-width: calc(100vw - 70px); }
  .pi-uit { width: 42px; height: 42px; }
  .pi-etichetta { display: none; }
  /* Sulla Terra del telefono medaglioni più piccoli: la Terra resta protagonista */
  .pi-segni .pi-segnaposto > .pi-uit { width: 34px; height: 34px; left: -17px; top: -17px; padding: 1.5px; }
  .pi-segni .pi-pila { width: 34px; height: 34px; left: -17px; top: -17px; }
  .pi-segni .pi-pila .pi-uit { width: auto; height: auto; padding: 1.5px; }
  .pi-segni .pi-onda { inset: -5px; }
  .pi-segni .pi-numero { min-width: 18px; height: 18px; right: -8px; bottom: -6px; font-size: 10.5px; }
  .pi-pila .pi-uit.p1 { transform: translate(6px, -5px) scale(.84); }
  .pi-pila .pi-uit.p2 { transform: translate(11px, -9px) scale(.7); }
  /* Riga dell'ora accanto al bottone «Scopri UITUIT», su due righe allineate a destra */
  .pi-ora { left: var(--ora-x, 50%); right: 16px; top: var(--ora-y, 50%); transform: translateY(-50%);
    display: grid; grid-template-columns: 1fr auto; justify-items: end; align-items: center; column-gap: 7px; row-gap: 6px;
    font-size: 12px; letter-spacing: .08em; }
  .pi-ora svg { grid-column: 1; grid-row: 1; }
  .pi-ora .pi-ora-1 { grid-column: 2; grid-row: 1; }
  .pi-ora .pi-ora-2 { grid-column: 1 / 3; grid-row: 2; }
  .pi-ora .pi-ora-sep, .pi-ora-pre { display: none; }
  .pi-ora-post { display: inline; }
  body.pianeta-esplora .pi-ora { display: none; }
  /* Nella mappa a schermo intero: «Torna alla Terra» in alto a sinistra al posto delle pillole */
  body.pianeta-esplora .pi-app.modo-mappa:not(.senza-terra) .pi-pillole { display: none; }
  body.pianeta-esplora .pi-torna { top: 12px; left: 12px; min-height: 44px; padding: 0 14px 0 12px; font-size: 14px; }

  /* Modalità «Esplora»: il pianeta a schermo intero, gesti liberi */
  body.pianeta-esplora { overflow: hidden; }
  /* main e #mondo creano un livello z 1: in esplorazione li alziamo sopra la testata (z 40) */
  body.pianeta-esplora main, body.pianeta-esplora #mondo { z-index: 55; }
  body.pianeta-esplora .pi-app { position: fixed; inset: 0; z-index: 50; height: 100dvh;
    background: radial-gradient(ellipse at 50% 45%, #0d1322 0%, #06070c 60%, #030406 100%); }
  body.pianeta-esplora .pi-esplora { display: none; }
  body.pianeta-esplora .pi-esci { display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 8; min-height: 44px; padding: 0 16px; font-size: 14px; gap: 6px; }
  body.pianeta-esplora .pi-esci svg { width: 18px; height: 18px; }
  body.pianeta-esplora .pi-pillole { top: 14px; bottom: auto; left: 12px; right: 120px; justify-content: flex-start; }
  body.pianeta-esplora .pi-pillola:last-child { display: none; }
  body.pianeta-esplora .pi-cerca { display: block; top: 68px; width: calc(100% - 24px); }
  /* Gli strumenti stanno sopra la pellicola (alta circa 93 px) anche con la barra di sistema dell'iPhone */
  body.pianeta-esplora .pi-strumenti { display: flex; left: 50%; transform: translateX(-50%); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 101px); padding: 4px; gap: 2px; border-radius: 16px; }
  body.pianeta-esplora .pi-strumenti button { width: 44px; height: 44px; }
  body.pianeta-esplora .pi-sep { margin: 8px 1px; }
  body.pianeta-esplora .pi-zoom { display: flex; right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); }
  body.pianeta-esplora .pi-tempo { display: block; left: 12px; right: 12px; width: auto; min-width: 0; transform: none; bottom: max(12px, env(safe-area-inset-bottom)); padding: 8px 8px 8px; border-radius: 16px; }
  body.pianeta-esplora .pi-conta { display: none; }
  /* Una riga sola: su 375 px «tutte le epoche» andava a capo e la pellicola copriva gli strumenti */
  body.pianeta-esplora .pi-riga > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.pianeta-esplora .pi-fotogramma { min-width: 72px; flex: 0 0 auto; }
  body.pianeta-esplora .maplibregl-ctrl-bottom-right { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 163px); }

  /* Pannello del luogo: foglio dal basso con maniglia */
  .pi-pannello { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; border-radius: 22px 22px 0 0; border-bottom: 0;
    transform: translateY(105%); transition: transform .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1), visibility 0s linear .3s; touch-action: pan-y; }
  .pi-pannello.aperto { transform: none; transition: transform .3s cubic-bezier(.32,.72,0,1), height .3s cubic-bezier(.32,.72,0,1); }
  .pi-pannello.alto { height: calc(100% - 64px); }
  .pi-pannello.trascino { transition: none; }
  .pi-maniglia { display: flex; justify-content: center; align-items: center; height: 26px; flex: none; cursor: grab; touch-action: none; }
  .pi-maniglia span { width: 44px; height: 5px; border-radius: 3px; background: rgba(243,233,220,.35); }
  .pi-x { top: 8px; right: 10px; }
  .pi-testa { touch-action: none; }
  .pi-foto img { aspect-ratio: 16 / 7; }
  .pi-testa h2 { font-size: 32px; }
  .pi-scheda { grid-template-columns: 72px 1fr; }
  .pi-mini { width: 72px; height: 58px; }
  .pi-storia { max-height: calc(100svh - 24px); }
  .pi-velo { padding: 12px; align-items: flex-end; }
  .pi-corpo { padding: 2px 20px 24px; }
}

/* Telefoni piccoli (360 px) */
@media (max-width: 380px) {
  body.pianeta-esplora .pi-strumenti button { width: 42px; }
  .pi-pillola { padding: 7px 9px; letter-spacing: .06em; }
}

/* ---------- Qualità bassa: niente onde pulsanti ---------- */
html[data-qualita="bassa"] .pi-onda { display: none; }

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .pi-onda { display: none; }
  .pi-punto, .pi-foto.attesa:not(.caricata) { animation: none; }
  .pi-app *, .pi-velo, .pi-velo *, .pi-toast { transition-duration: 0s !important; }
  .pi-storia { transform: none; }
  .pi-copertina img { transform: none; }
}