html, body {
  margin: 0;
  padding: 0;
  /* Evita il "rubber-band bounce" di iOS quando si trascina il panorama o
     la mappa: senza, il tocco può far scorrere l'intera pagina invece di
     restare confinato al widget sotto il dito. */
  overscroll-behavior: none;
}

#panorama {
  position: fixed;
  inset: 0;
  /* Larghezza/altezza esplicite: google.maps.StreetViewPanorama forza
     position:relative sul contenitore via inline style, quindi "inset"
     da solo non basta più a determinarne le dimensioni. */
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* viewport dinamico: niente salti quando la barra degli indirizzi mobile appare/scompare */
  z-index: 0;
  /* Il drag Google gestisce da sé i touch event: qui evitiamo solo che il
     browser li interpreti anche come scroll/zoom nativo della pagina
     (elimina il ritardo di disambiguazione e rende il drag più reattivo). */
  touch-action: none;
}

#map-container {
  /* Mobile (default, mobile-first): barra larga quasi quanto lo schermo
     (larghezza già data dal posizionamento left/right in HTML), altezza
     fissa indipendente dalla larghezza — niente aspect-ratio qui, altrimenti
     una barra così larga diventerebbe troppo alta. */
  height: 240px;
  /* I gesti sulla mappa (pan/zoom Leaflet) non devono far scorrere la pagina. */
  touch-action: none;
}

/* Mobile: la mappa parte nascosta e si apre a schermo quasi intero tramite
   l'icona nella barra azioni (js/game.js gestisce le classi). Il riquadro
   compatto desktop non è mai toccato da queste regole (scoped <640px). */
@media (max-width: 639px) {
  #map-container {
    display: none;
  }

  #map-container.map-expanded {
    display: block;
    left: 3vw;
    right: 3vw;
    /* Il 60% dell'area visibile tra header e barra azioni, ancorata dal
       basso e leggermente staccata dalla barra (non più "attaccata").
       La barra azioni è alta ~76px (pulsante 48px + padding verticale):
       bottom va oltre quell'altezza, altrimenti la mappa finisce nascosta
       dietro la barra invece che sopra con un margine. */
    height: 45vh;
    top: auto;
    bottom: 92px;
  }

  #map-container.map-expanded #map-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop (>=640px, coerente col breakpoint sm: di Tailwind usato in HTML):
   torna al riquadro compatto in basso a destra, dimensione proporzionale
   allo schermo con un tetto massimo. */
@media (min-width: 640px) {
  #map-container {
    width: clamp(170px, 42vw, 320px);
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Solo su desktop con mouse reale: ingrandimento al passaggio del cursore.
   Il ResizeObserver in map.js tiene sincronizzata la vista Leaflet durante
   la transizione. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  #map-container {
    transition: width 0.2s ease, height 0.2s ease;
  }

  #map-container:hover {
    width: min(480px, 60vw);
  }
}

#map {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.marker-pin {
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.marker-pin-guess {
  background: #3498db;
}

.marker-pin-true {
  background: #e74c3c;
}

/* Tutorial one-time: il "buco" luminoso attorno all'elemento evidenziato è
   ottenuto con un box-shadow enorme che scurisce tutto il resto dello
   schermo, invece di ritagliare l'overlay stesso (js/game.js posiziona
   #tutorial-highlight sopra l'elemento target ad ogni step). */
#tutorial-highlight {
  box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.72);
  border: 2px solid #fbbf24;
}

/* Step senza un elemento specifico da evidenziare (es. "guardati intorno"):
   il riquadro #tutorial-highlight resta nascosto, quindi lo scurimento dello
   schermo va applicato direttamente all'overlay (vedi renderTutorialStep in
   js/game.js). */
#tutorial-overlay.tutorial-dim {
  background: rgba(2, 6, 23, 0.55);
}

/* UI polish, solo mobile: schermi piccoli hanno meno spazio per gesti precisi
   e testo, quindi l'icona mappa e gli spazi della barra azioni/header
   crescono leggermente rispetto al desktop (dove lo spacing resta invariato). */
.leaflet-control-attribution {
  font-size: 0.65rem;
  padding: 0 4px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  #map-toggle-btn {
    width: 50px;
    height: 50px;
    font-size: 2.5rem;
    line-height: 1;
  }

  /* Padding verticale quasi invariato rispetto all'originale (pt-3/pb-4):
     l'altezza della barra resta ~76-78px, altrimenti il pannello mappa
     espanso (bottom: 92px, vedi sopra) le finisce troppo addosso. Solo i lati
     guadagnano respiro extra. */
  #action-bar {
    gap: 0.875rem;
    padding: 0.75rem 1.25rem 1rem;
  }

  #site-header {
    padding: 0.75rem 1rem;
  }
}