/* ===========================================================================
   OSD a schermo intero (lettera E). Vedi components/videoPlayers/Osd.js.
   Un componente, tre usi: diretta (con EPG), film, episodio.

   Tutto FUORI DAL FLUSSO, sopra il video: niente si sposta quando compare.
   L'anello del fuoco e' un box-shadow e legge il raggio dall'elemento.
   =========================================================================== */
.osd {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; /* era inset: 0 (Chromium 87); qui webOS 5 */
  z-index: 1200;
  color: white;
  pointer-events: none;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.osd.hidden {
  display: none;
}
.osd .osd-btn {
  pointer-events: auto;
  border: none;
  cursor: pointer;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  font-size: 26px;
  border-radius: 12px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
}
.osd .osd-btn > * + * {
  margin-left: 12px; /* era gap: 12px (Chromium 84); qui webOS 5 */
}
.osd .osd-btn.osd-fuoco {
  box-shadow: 0 0 0 4px var(--gold);
}

/* In alto da sinistra: Indietro, Proporzioni. */
.osd-alto {
  position: absolute;
  top: 30px;
  left: 40px;
  display: flex;
}
/* In alto da sinistra: Indietro, Proporzioni. */ .osd-alto > * + * {
  margin-left: 20px; /* era gap: 20px (Chromium 84); qui webOS 5 */
}

/* La tendina Audio (c29, forma 2): sotto la riga alta, le tracce lingua · codec; la voce a fuoco con l'anello, quella in uso in oro. */
.osd-tendina {
  position: absolute;
  top: 110px;
  left: 40px;
  min-width: 360px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 12px;
  padding: 12px 0;
  pointer-events: auto;
}
.osd-tendina.hidden {
  display: none;
}
.osd-tendina-titolo {
  margin: 0 22px 8px 22px;
  font-size: 22px;
  color: var(--gold);
  font-weight: 600;
}
.osd-tendina-voci {
  list-style: none;
  margin: 0;
  padding: 0;
}
.osd-tendina-voce {
  padding: 10px 22px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px; /* il raggio e' dell'elemento: l'anello del fuoco lo legge da qui (test-scheda 3) */
}
.osd-tendina-voce.osd-tendina-attiva {
  color: var(--gold);
}
.osd-tendina-voce.osd-fuoco {
  box-shadow: inset 0 0 0 3px var(--gold);
}

/* "Privacy ON" e l'occhio, in alto a destra, solo con Privacy ON (Osd.js disegnaPrivacy; c28 forma 5). */
.osd-privacy {
  position: absolute;
  top: 30px;
  right: 40px;
  display: flex;
  align-items: center;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 26px;
  line-height: 1;
}
.osd-privacy .osd-privacy-testo {
  margin-right: 12px; /* niente gap: webOS 5 */
  font-weight: 600;
}
.osd-privacy.hidden {
  display: none;
}

/* Play/Stop al centro, rotondo. */
.osd-centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.osd .osd-play {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  justify-content: center;
  font-size: 56px;
  padding: 0;
}

/* Il velo in basso: canale, titolo in onda, guida (o trama). ALTO QUANTO
   IL CONTENUTO, ancorato in basso: niente altezza fissa, niente area
   scura vuota. Il gradiente sfuma nei primi 60px sopra il testo. */
.osd-basso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 60px 40px 60px;
  box-sizing: border-box;
  max-height: 60%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.85) 60px, rgba(0, 0, 0, 0.92) 100%);
  overflow: hidden;
}
/* Nel VOD il velo poggia sulla striscia della barra di seek
   (.custom-video-controls, alta 110px, che resta com'e'): il bordo
   inferiore del velo e' il bordo superiore della striscia. */
.osd-vod .osd-basso {
  /* La striscia e' alta 110px CSS ma ha zoom: 2, quindi 220px sullo
     schermo; il velo finisce 10px sopra. Dal TV: con 110 la copriva. */
  bottom: 230px;
}
/* Nome e titolo su UNA riga ciascuno, coi puntini (c28, forma 6): nel VOD il
   velo poggia sulla striscia del seek e le due righe non devono mai
   scivolarci sotto; l'episodio lungo si tronca. */
.osd-canale {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osd-titolo {
  margin: 10px 0 0 0;
  font-size: 32px;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.osd-epg {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.35;
  opacity: 0.9;
}
.osd-descrizione {
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.osd-dopo {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0.75;
}
.osd-dopo li {
  margin: 4px 0;
}