@media screen and (orientation: landscape) and (min-aspect-ratio: 2/1) and (max-width: 1900px) {
   /* Adattamento per telefoni in landscape stretto (schermi bassi/larghi ma con
   poca altezza). Foglio additivo: le regole valgono solo dentro le media
   query qui sotto, quindi tablet e desktop restano identici a prima.
   Va caricato DOPO main.css/selezione.css nelle pagine html. */

   #personalizzazione td img {
      height: 9em;
      margin-bottom: 0.4em;
   }
   #personalizzazione h3 {
      padding-top: 2.4em;
      margin-bottom: 0.3em;
      font-size: 1.1em;
   }
   #personalizzazione h3:last-of-type {
      padding-top: 0.3em;
   }
   #personalizzazione td {
      padding-bottom: 0.2em;
      font-size: 90%;
   }
   .personal_deco {
      margin-top: 0.3em;
   }
   #footer,
   .footer {
      display: none;
   }
   #nav {
      background-image: none;
      box-shadow: none;
      border-bottom: none;
   }
   #nav td:first-child,
   #nav td:nth-child(2) {
      display: none;
   }
   #nav table {
      width: auto;
      margin-left: auto;
   }
   #tendina_esterno {
      top: 4em;
   }
   #pulsanteMenu {
      position: relative;
      top: 0.5em;
   }
   #main {
      overflow:hidden;
      margin-top: -1em;
   }
   #testo {
      padding-right: 6%;
   }
   #persone {
      min-height: 26em;
   }
   /* border:4px double disegna due righe parallele con uno spazio in
      mezzo (invece di una sola linea): su schermi piccoli si nota come
      un doppio bordo rosso ingombrante. Un bordo singolo basta. */
   #messaggio_interno,
   #messaggio2,
   #avvertimentoRisoluzione {
      border: 2px solid #a52a2a;
   }
   /* La scrivania SVG ha viewBox 100x50, cioè un rapporto d'aspetto di
      esattamente 2:1. Sopra questo rapporto lo schermo è proporzionalmente
      più largo della scena: riempiendo la larghezza al 100% (comportamento
      di default in main.css) l'altezza calcolata dal rapporto supera lo
      spazio verticale disponibile e la parte alta/bassa viene tagliata da
      #scrivania { overflow:hidden }. La soglia non è calibrata su un
      device specifico: è il rapporto d'aspetto reale dell'asset. Sotto
      quel rapporto invece basiamo la scrivania sull'altezza al 100% e
      lasciamo che il nero di sfondo di #scrivania riempia i lati residui
      (pillarbox) invece di tagliare il contenuto. */
   #scrivania {
      /* border-box: #scrivania ha padding-top:1.9em (spazio per la barra
         #nav fissa, in main.css). Con il box-sizing di default (content-box)
         quel padding si somma a height:100vh, quindi il totale supera il
         viewport e l'eccesso viene tagliato da overflow:hidden. Con
         border-box il padding viene conteggiato dentro ai 100vh invece di
         aggiungersi, ed elimina il taglio residuo. */
      height: 100vh;
      box-sizing: border-box;
      top: -1em;
   }
   #testo_contenitore p {
      margin-right: 15%;
   }

   #divmappadesktop,
   #divmappagrande {
      top: 0;
      height:44em;
   }

   #lista_personeA,
   #lista_personeB {
      width: 74%;
      margin-left: 13%;
   }

   #personalizzazione {
      top: -1em;
      font-size: 0.9em;
   }

   .spilla {
      display: none;
   }

   #divdiario {
      top: -1em;
   }

   #indizi {
      top: 3em;
   }

   #lente {
      display: none;
   }

   /* Niente hover su touchscreen: senza questo pulsante non c'è modo di
      vedere il retro degli indizi a doppia faccia (vedi .girata in main.css). */
   .pulsante_ruota {
      display: block;
      position: absolute;
      bottom: -2.4em;
      left: 0;
      z-index: 2;
   }

   #footer,
   .footer {
      display: none;
   }

   #scrivania_svg {
      width: auto;
      height: 100%;
      display: block;
      margin: 0 auto;
   }

   #appunti_blocco_genitore, #appunti_blocco {
      display: none;
   }

   #info {
      display: none !important;
   }

   #principale {
      height:100vh;
      margin-top: -1em;
   }

   #atmosfera {
      top: -1em;
   }

   #banner {
      top: -57.2em;
      z-index: 0;
   }

}