/*
 * web.css — KOOL TV web (3 ottobre 2026, parte 7): l'impaginazione adattiva. Vale SOLO sotto html.web (config/piattaforma.js,
 * sull'host della web): sui televisori nessuna regola di questo foglio si applica.
 *
 * UNA SCALA SOLA: la pagina dei TV e' disegnata per 1920x1080. Nel browser il BODY e' una TELA fissa di 1920x1080, scalata con
 * transform di --scala = min(larghezza/1920, altezza/1080) e centrata (--sx, --sy), ricalcolate al resize. Tutto cio' che sta nel
 * body (anche cio' che viene attaccato al body: barra laterale, dialoghi, avvisi) segue la stessa scala; i position:fixed hanno la
 * tela come riferimento. Transform e non zoom: con lo zoom sulla radice i tre motori non sono d'accordo (misurato: con zoom 0.5,
 * 100vh e' alto quanto la finestra in WebKit, meta' in Firefox; Chrome 127 da' misure non scalate), con transform si'.
 * Le misure in vh/vw dei fogli dei TV sono calc(N * var(--vh, 1vh)) (strumenti/web-vh.py): qui --vh e --vw sono la tela.
 * Lo schermo intero resta sulla finestra vera (le sue regole non usano la variabile).
 */
html.web {
  --vh: 10.8px;
  --vw: 19.2px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
html.web body {
  position: absolute;
  left: var(--sx, 0px);
  top: var(--sy, 0px);
  width: var(--tela-l, 1920px);   /* parte 7 del telefono: fino ai 21:9 (config/piattaforma.js) */
  height: var(--tela-a, 1080px);  /* parte 8: la modalita' telefono ha la tela piu' bassa */
  margin: 0;
  overflow: hidden;
  transform: scale(var(--scala, 1));
  transform-origin: 0 0;
}
html.web .main-container {
  height: var(--tela-a, 1080px);
}
/* LA PAGINA RUOTATA (15 ottobre 2026, punto 24 a dell'operatore; config/piattaforma.js, classe web-ruotata): il telefono in verticale
   disegna la tela di un telefono in orizzontale (larghezza e altezza scambiate) ruotata di 90 gradi in senso orario intorno all'angolo
   in alto a sinistra, poi spostata a destra della larghezza della finestra (--rx): riempie lo schermo, l'alto della pagina a destra. */
html.web.web-ruotata body {
  left: 0;
  top: 0;
  transform: translateX(var(--rx, 0px)) rotate(90deg) scale(var(--scala, 1));
}
/* IL LOGO DELLA DASHBOARD SUL TELEFONO (punto 24, il caso 1 dell'operatore: "il logo KOOL si sovrappone a orologio e data"). Il logo e'
   centrato in assoluto (dashNuova.css): sulla tela stretta di un telefono (iPhone con le barre di Safari: 1207 px) copriva l'ora (misurato
   nel banco, W230i: logo 494-714, ora 693-1059). Sul telefono sta nella riga fra l'avatar e la destra: i tre non si toccano mai. */
html.web.web-telefono .dash-logo {
  position: static;
  flex-shrink: 0;
  margin: 0 16px;
  transform: none;
}
/* IL FOGLIO VERTICALE DEI CAMPI (punto 24 c; config/web-input.js, 17): fuori dal body, in px veri della finestra, dritto sopra la pagina
   ruotata finche' si scrive; i caratteri a 18 px (sotto 16 Safari ingrandisce la pagina al fuoco). */
html.web .web-foglio {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1999999;   /* sopra ogni strato della pagina (il piu' alto: 200000), sotto il messaggio (toaster.css, 2000000: test-parentale 13) */
  box-sizing: border-box;
  padding: 30px 22px;
  background: #0f1a1e;
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
}
html.web .web-foglio-titolo {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 700;
}
html.web .web-foglio-campo {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 3px solid #e7a101;
  border-radius: 12px;
  outline: none;
  background: #000;
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
  font-size: 18px;
}
html.web .web-foglio-ok {
  margin-top: 16px;
  height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: 22px;
  background: #e7a101;
  color: #000;
  font-family: Poppins, Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
}
/* ---- parte 8: il mouse (config/web-input.js) --------------------------------------------------------------------------------- */
/* Il :hover dei fogli dei TV e' spento in web (web-input.js): resta solo il cursore sugli elementi che il fuoco puo' raggiungere. */
html.web .menu-box, html.web .livetv-channel-category, html.web .channel-card, html.web .channel-fav-btn, html.web .movie-channel-category,
html.web .movies-card, html.web .series-channel-category, html.web .series-card, html.web .movie-detail-buttons button,
html.web .series-detail-buttons button, html.web .serie-episodio, html.web .setting-card, html.web .general-settings-card,
html.web .login-page-btn, html.web .intestazione-menu, html.web .exit-main-container .btn, html.web .dropdown-item {
  cursor: pointer;
}
/* Il pulsante <- nell'intestazione delle sezioni (IntestazioneSezione) e, nelle altre pagine, in basso a sinistra (web-input.js). */
html.web .intestazione-indietro,
html.web .web-indietro {
  width: 64px;
  height: 64px;
  margin-right: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
html.web .intestazione-indietro:hover,
html.web .web-indietro:hover {
  border-color: var(--gold, #e7a101);
}
/* L'INTESTAZIONE UNICA (giro 4b, 6 ottobre 2026; decisione 54): la freccia sta SEMPRE in alto a sinistra; qui il pulsante delle
   pagine che non hanno una testata (il dialogo di uscita dalle Impostazioni, il player col trailer). */
html.web .web-indietro {
  position: absolute;
  left: 40px;
  top: 40px;
  z-index: 50;
  margin: 0;
}
/* Il trailer (giro 4a, 5 ottobre 2026, sera; config/web-input.js 13): col trailer l'OSD non c'e' e il "<-" sta sopra il player, in
   alto a sinistra (lontano dai comandi di YouTube), sopra la striscia dei comandi (videoJsPlayer.css, z-index 1300). */
html.web .web-indietro.web-indietro-player {
  top: 40px;
  bottom: auto;
  z-index: 1400;
}
/* La barra del player di video.js al passaggio del mouse: play/pausa, volume, avanzamento (film ed episodi), schermo intero.
   Sui TV resta nascosta (videoJsPlayer.css, display:none !important): qui una regola piu' specifica, solo sotto html.web. */
html.web .video-js:hover .vjs-control-bar {
  display: flex !important;
  font-size: 16px;
  height: 4em;
  background: rgba(0, 0, 0, 0.6);
}
/* L'ANTEPRIMA DELLA LIVE (giro 4a, 5 ottobre 2026, sera; LiveVideoJsComponent, controls:false nel browser): la barra di video.js
   NON si mostra, neanche col mouse sopra. Il :hover qui sopra e' !important: questa regola, piu' specifica, vince. I comandi
   sono i nostri (Spazio, M, F, doppio clic, pulsante dello schermo intero). W78. */
html.web .livetv-video-wrapper .video-js .vjs-control-bar,
html.web .livetv-video-wrapper .video-js:hover .vjs-control-bar {
  display: none !important;
}
/* Il velo delle schede (::before, z-index 1, sopra tutto) prendeva il mouse: il clic su Play arrivava al contenitore. Resta il velo,
   il mouse passa (misurato il 3 ottobre: elementFromPoint al centro di Play = .movie-detail-page-container). */
html.web .movie-detail-page-container::before,
html.web .series-detail-page-container::before {
  pointer-events: none;
}

/* Segnalazione 4 (3 ottobre 2026): nel browser niente "Tieni premuto OK sul canale per aggiungerlo ai preferiti": col mouse si
   clicca il cuore (W41). Sui TV la riga resta. */
html.web .livetv-suggerimento { display: none !important; }

/* Le Impostazioni della web = il menu di Android 0.1.55 (4 ottobre 2026, telefono parte 2): una lista di righe voce | valore,
   l'anello oro sul fuoco come le tessere. */
html.web .impw-lista {
  width: 1100px;
  margin: 30px auto 0;
  max-height: 860px;
  overflow-y: auto;
}
html.web .impw-riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 30px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: #0d0d0d;
  border: 2px solid #333;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}
html.web .impw-testi { display: flex; flex-direction: column; }
html.web .impw-descrizione { font-size: 20px; color: #aaa; margin-top: 6px; }
html.web .impw-valore { color: var(--gold, #e7a101); font-size: 28px; margin-left: 30px; white-space: nowrap; }
html.web .impw-riga.impw-fuoco, html.web .impw-indietro.impw-fuoco { border-color: var(--gold, #e7a101); box-shadow: 0 0 0 3px var(--gold, #e7a101); }
html.web .impw-indietro {
  margin-top: 16px;
  padding: 16px 48px;
  font-size: 28px;
  border-radius: 12px;
  background: #0d0d0d;
  color: #fff;
  border: 2px solid #333;
  cursor: pointer;
  font-family: inherit;
}
html.web .impw-versione { color: #888; font-size: 22px; margin-top: 18px; }

/* (l'avviso "Ruota il telefono" in verticale e' tolto: 8 ottobre 2026, giro web, decisione D) */

/* L'avvio rifiutato (4 ottobre 2026, telefono parte 5): il pulsante play al centro del video (config/web-input.js). */
html.web .web-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  margin-left: -70px;
  margin-top: -70px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 56px;
  z-index: 10000;   /* sopra la rotella e i veli del player */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
}

/* Il velo delle proporzioni (un'etichetta, videoJsPlayer.css: z-index 9999, opacity 0 quando nascosto) prendeva i tocchi e i clic
   al CENTRO del video anche invisibile (misurato col pulsante play, telefono parte 5): nel browser non li prende piu'. */
html.web .aspect-ratio-overlay { pointer-events: none; }
/* La rotella del trailer (6 ottobre 2026; report di diagnosi 2026-10-05-2105): nell'app in Home su iPhone l'embed resta fermo e il play
   si tocca DENTRO l'iframe di YouTube; il velo della rotella (videoJsPlayer.css, z-index 1250, nero al 70%) non deve fermare il dito.
   VideoJsPlayer la spegne a 3 s col trailer fermo; qui, finche' c'e', e' trasparente ai tocchi. Sui TV com'era. */
html.web .video-js-player-container .video-buffer-loader { pointer-events: none; }
/* LE PROPORZIONI (11 ottobre 2026, banco W177): il contenitore del player taglia cio' che esce dal riquadro (nel giro 1 l'immagine
   ingrandita di 4:3 e 21:9 usciva sulla pagina intorno; coi cinque modi del giro 2 nessun modo la ingrandisce piu' oltre il riquadro, la
   regola resta come riparo). SOLO nel browser: sui Samsung un clip su un antenato del <video> nativo ne impedisce la composizione
   (anteprima solo audio, test-anteprima), e sui TV questo foglio non si applica. */
html.web .video-js { overflow: hidden; }
/* Il telefono in verticale: la pagina com'e' ("Da decidere 23", giro 2 delle proporzioni), niente pulsante Proporzioni nell'OSD; il video
   resta in Adatta (videoJsPlayer.css). In orizzontale il pulsante torna e vale la scelta del dispositivo. */
html.web-verticale .osd .osd-btn[data-azione="proporzioni"] { display: none !important; }
html.web .web-play-attesa .live-video-loader, html.web .web-play-attesa .video-buffer-loader { display: none !important; }

/* ---- LA MODALITA' TELEFONO (4 ottobre 2026, telefono parte 8; il disegno: report 2026-10-04-0853) ------------------------------
   html.web.web-telefono: puntatore a tocco e diagonale sotto 1100 px CSS (config/piattaforma.js). La tela e' piu' bassa di 1080
   (915x412 -> 1664x749 logici): qui le pagine dei TV con altezze fisse si adattano, le liste scorrono col dito, il tocco prolungato
   non apre il menu del browser. */
html.web.web-telefono .channel-card, html.web.web-telefono .movies-card, html.web.web-telefono .series-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Film e Serie (il disegno: due righe di locandine visibili, piu' strette): colonne e griglie alte quanto la tela meno
   l'intestazione, locandine da 280 px logici in griglie da 190 px. */
html.web.web-telefono .movies-channels-list, html.web.web-telefono .movies-cards-list-container,
html.web.web-telefono .series-channels-list, html.web.web-telefono .series-cards-list-container {
  height: calc(var(--tela-a, 1080px) - 170px);
}
html.web.web-telefono .movies-cards-list-container, html.web.web-telefono .series-cards-list-container {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
html.web.web-telefono .movies-card, html.web.web-telefono .series-card {
  height: 280px;
}
/* La dashboard (il disegno: tutto visibile senza scorrere): tessere alte quanto la tela meno la riga in alto e il +7 % del fuoco
   (dashboard nuova, 4 ottobre 2026). */
html.web.web-telefono .dash .dash-tessera {
  height: calc(var(--tela-a, 1080px) - 300px);
}
html.web.web-telefono .dash .dash-icona {
  font-size: 100px;
  margin-bottom: 18px;
}

/* L'ACCESSO DAL TELEFONO (5 ottobre 2026, segnalazione dalla prova su mywebtv.top: "la pagina di login non scrolla e non si riesce a
   entrare"). La schermata e' alta quanto la tela (Samsung 740x304 -> 553 logici, iPhone 750x342 -> 622) ma il contenuto ne voleva
   ~760, con overflow nascosto: Accedi stava sotto il bordo e il dito non scorreva niente. Qui: la pagina SCORRE col dito e si
   compatta (logo, codice su una riga, campi e spazi piu' bassi); il campo toccato sale in cima (LoginPage, sopra la tastiera). W63. */
html.web.web-telefono .login-page-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.web.web-telefono .login-header img {
  height: 110px;
  width: auto;
  padding: 18px 40px 8px;
}
html.web.web-telefono .attivazione-titolo,
html.web.web-telefono .login-form h1 {
  font-size: 30px;
  margin-bottom: 14px;
}
html.web.web-telefono .attivazione-codice {
  font-size: 60px;
  white-space: nowrap;
  padding: 12px 20px;
  margin-bottom: 16px;
}
html.web.web-telefono .login-page-form-container {
  grid-gap: 22px;
  padding-top: 10px;
  padding-bottom: 22px;
}
html.web.web-telefono .login-form input {
  height: 70px;
}
html.web.web-telefono .login-form {
  padding-bottom: 40px;
}
/* "DUE MODI PER ACCEDERE" SULLA WEB (12 ottobre 2026; decisione dell'operatore inoltrata da opt-16, decisione 90): la pagina di login
   delle TV (css/loginPage.css, .login-tv.login-due) anche nel browser, sulla tela di 1920x1080. Sul PC le due colonne: a sinistra il QR
   col codice unico sotto, la riga "oppure", la riga di stato e l'avviso della finestra privata; a destra nome utente, password e Accedi
   a tutta la colonna (niente Esci). Le misure sono scritte tutte qui: le @media di loginPage.css (finestre sotto 1024 px CSS) non
   rimpiccioliscono campi e pulsanti dentro la tela. Le regole delle TV non cambiano (W207). */
html.web .login-web.login-due .login-header {
  position: relative;
  height: 170px;
}
html.web .login-web.login-due .login-header img {
  height: auto;
  padding: 56px 0 0 6%;
}
html.web .login-web .login-colonne.login-due-colonne {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-left: 6%;
  padding-right: 6%;
  padding-top: 36px;
}
html.web .login-web.login-due .attivazione-titolo {
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 28px;
  white-space: nowrap;
  overflow: hidden;
}
html.web .login-web.login-due .qr-pannello {
  padding-right: 60px;
  margin-right: 60px;
  text-align: center;
}
html.web .login-web.login-due .qr-pannello .attivazione-titolo {
  text-align: center;
}
/* la colonna nell'ordine delle pagine TV e di Android (Da decidere 51.2 b, 14 ottobre 2026): sotto il QR "oppure", la scritta piccola
   "IL TUO CODICE TV" (maiuscola), il codice grande in oro; le misure dei TV (css/loginPage.css, .login-tv.login-due) */
html.web .login-web.login-due .qr-oppure {
  font-size: 24px;
  margin: 16px 0 0;
}
html.web .login-web.login-due .qr-etichetta {
  font-size: 22px;
  font-weight: 600;
  color: #cfd6d9;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 28px 0 0;
  white-space: nowrap;
}
html.web .login-web.login-due .qr-codice {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 6px 0 4px;
}
html.web .login-web.login-due .qr-stato {
  margin-top: 6px;
  min-height: 1.4em;
  overflow: hidden;
}
html.web .login-web.login-due .attivazione-stato-vuota .attivazione-punto {
  visibility: hidden;
}
html.web .login-web.login-due .attivazione-privata {
  max-width: none;
  margin: 12px 0 0;
}
html.web .login-web.login-due .login-form {
  align-self: center;
  padding: 0;
}
html.web .login-web.login-due .login-page-form-container {
  grid-gap: 44px;
  padding-top: 24px;
  padding-bottom: 24px;
}
html.web .login-web.login-due .login-form input {
  font-size: 30px;
  height: 80px;
  padding-left: 84px;
}
html.web .login-web.login-due .login-input-container img {
  width: 42px;
  height: 42px;
  left: 21px;
}
html.web .login-web.login-due .button-container {
  align-items: stretch;
}
html.web .login-web.login-due .login-form button.accedi {
  width: 100%;
  max-width: none;
  height: 70px;
  font-size: 32px;
  margin: 0;
}
/* SUL TELEFONO una colonna che scorre col dito (la regola del 5 ottobre, sopra): il logo e il titolo, PRIMA l'accesso, poi il filetto
   e il QR col codice sotto. Il titolo va sotto il logo (sulla tela stretta il logo e il titolo centrato si coprivano). */
html.web.web-telefono .login-web.login-due .login-header {
  height: auto;
}
html.web.web-telefono .login-web.login-due .login-header img {
  height: 110px;
  width: auto;
  padding: 18px 6% 0;
}
html.web.web-telefono .login-web.login-due .login-due-titolo {
  position: static;
  margin: 12px 6% 0;
  font-size: 44px;
}
html.web.web-telefono .login-web .login-colonne.login-due-colonne {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 24px;
}
html.web.web-telefono .login-web.login-due .login-form {
  order: -1;
  align-self: stretch;
  padding-bottom: 48px;
}
html.web.web-telefono .login-web.login-due .login-page-form-container {
  grid-gap: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
}
html.web.web-telefono .login-web.login-due .login-input-container {
  margin-bottom: 0;
}
html.web.web-telefono .login-web.login-due .qr-pannello {
  padding: 40px 0 60px;
  margin: 0;
  border-right: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
}
/* I TITOLI DELLE DUE PARTI SUL TELEFONO (15 ottobre 2026, punto 23; la Da decidere 53 chiusa dall'operatore): sul PC stanno su una riga
   (white-space nowrap e overflow hidden, sopra), ma nella colonna stretta del telefono in verticale "Inquadra il codice QR con il
   telefono" era tagliato a destra ("...con il telefor"). Qui a 30 px, come gli altri titoli del telefono (la regola di sopra,
   html.web.web-telefono .attivazione-titolo, perdeva contro quella della web), e se non basta vanno a capo (l'allineamento resta
   quello di sopra): il testo si legge tutto (W208-W211: nessun testo tagliato). */
html.web.web-telefono .login-web.login-due .attivazione-titolo {
  font-size: 30px;
  white-space: normal;
  overflow: visible;
  line-height: 1.25;
}
/* La quarta tessera (l'Archivio TV, 5 ottobre 2026) sul telefono: le quattro nella larghezza della tela (740x304 -> 1345 logici),
   col margine per il +7 % della tessera a fuoco (misurato dal vivo sul profilo Samsung: con 200 px l'anello toccava il bordo). */
html.web.web-telefono .dash .dash-tessere-4 .dash-tessera {
  width: calc((var(--tela-l, 1920px) - 300px) / 4);
}
html.web.web-telefono .dash .dash-tessere-4 .dash-tessera .menu-title {
  font-size: 30px;
}
/* LE COLONNE DELLA LIVE SUL TELEFONO (giro 4a, 5 ottobre 2026, sera): categorie e canali sono alti 81 vh della tela (livePage.css) e
   partono sotto l'intestazione (120 px logici): sul Samsung in orizzontale (tela 553) sbordavano di 15 px logici (8 px CSS) sotto la
   finestra e l'ultima categoria era tagliata di 3 px; sull'iPhone (tela 622) di 2,5. Qui alti quanto la tela meno l'intestazione e
   un margine, col padding dentro. W79. */
html.web.web-telefono .livetv-channels-list {
  height: calc(var(--tela-a, 1080px) - 145px);
  box-sizing: border-box;
}
html.web.web-telefono .livetv-channels-list-container {
  max-height: calc(var(--tela-a, 1080px) - 145px);
  box-sizing: border-box;
}
/* Il tocco su iPhone (5 ottobre 2026; config/web-input.js, 10): il contenitore delle pagine ha un gestore del clic, e Safari col
   dito ingrigirebbe tutta la pagina a ogni tocco: il velo del tocco si spegne (resta il fuoco della pagina). */
html.web .main-container {
  -webkit-tap-highlight-color: transparent;
}

/* LA SCHEDA DEL FILM CHE NON SCORRE (5 ottobre 2026, sera, segnalazione da Safari iPhone: "nelle schede dei film la pagina non scorre
   verso il basso"). Stessa causa dell'accesso: la scheda del film non ha ne' altezza ne' scorrimento suo (quella della serie si':
   seriesDetailPage.css), la tela e il body hanno overflow nascosto, e sulla tela del telefono (622 logici sull'iPhone) la trama e
   il cast vanno sotto il bordo. Sui TV ci arriva il fuoco (scrollIntoView, che scorre anche un overflow nascosto); il dito no. Qui
   la pagina della scheda e' alta quanto la tela e scorre col dito (e con la rotella: la trama lunga supera la tela anche su Chrome
   Windows 1366x768, misurato, W68w). W68. */
html.web #movies-detail-page {
  height: var(--tela-a, 1080px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* LA FINESTRA DEGLI AVATAR (giro 4b, 6 ottobre 2026; decisione 52, come Android 0.1.60; GestioneProfiliPage, solo nel browser): centrata
   sulla pagina velata, 85% della tela (80% sul telefono); i quattro gruppi in alto (quello caricato in oro, quello a fuoco con l'anello),
   la griglia di UN gruppo sotto, che scorre dentro la finestra; l'avatar in uso con l'anello bianco, quello a fuoco in oro. Prima la
   finestra sbordava a destra con una griglia piatta di 550 (gestioneProfili.css: griglia larga 1312 px fissi). */
/* GIRO 4c (6 ottobre 2026): il riquadro porta anche la classe gp-griglia (gp- + il tipo del riquadro sopra) e ne prendeva flex-wrap: wrap e
   overflow: auto. Con i 150 avatar veri di un gruppo la griglia non stava nella colonna e andava a capo IN UNA SECONDA COLONNA, a destra
   dei gruppi, col vuoto sotto di loro (misurato: griglia da x 1111 a 2660 in un riquadro largo 1633, W91). Qui una colonna sola, senza a
   capo: i gruppi in alto, la griglia sotto a tutta larghezza, che scorre lei; il riquadro non scorre. */
html.web .gp-riquadro.gp-avatar-web { width: 85%; height: 85%; max-width: none; max-height: none; padding: 30px 40px; flex-wrap: nowrap; overflow: hidden; }
html.web .gp-avatar-web .gp-domanda { margin-bottom: 14px; }
html.web .gp-gruppi { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; flex: 0 0 auto; }
html.web .gp-gruppo { margin: 0 8px 8px; padding: 10px 26px; border-radius: 24px; border: 3px solid transparent; background: rgba(255, 255, 255, 0.12); color: #fff; font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; cursor: pointer; outline: none; }
html.web .gp-gruppo.gp-attivo { background: #e7a101; color: #111; }
html.web .gp-gruppo.gp-focused { border-color: #fff; box-shadow: 0 0 0 3px #e7a101; }
html.web .gp-avatar-web .gp-griglia { width: 100%; flex: 1 1 auto; min-height: 0; max-height: none; justify-content: center; align-content: flex-start; }
html.web .gp-avatar-web .gp-av.gp-scelto { border-color: #fff; }
html.web .gp-avatar-web .gp-av.gp-focused { border-color: #e7a101; }
html.web .gp-avatar-web .gp-tasti-web { flex: 0 0 auto; }
html.web.web-telefono .gp-riquadro.gp-avatar-web { width: 80%; height: 80%; padding: 14px 20px; }
html.web.web-telefono .gp-avatar-web .gp-domanda { font-size: 24px; margin-bottom: 8px; }
html.web.web-telefono .gp-gruppo { font-size: 20px; padding: 6px 18px; margin-bottom: 6px; }
html.web.web-telefono .gp-avatar-web .gp-av { width: 96px; height: 96px; margin: 8px; border-width: 4px; }
html.web.web-telefono .gp-avatar-web .gp-pulsante { margin-top: 10px; padding: 8px 24px; font-size: 22px; }

/* IL MENU DEI TRE PUNTINI con il riquadro delle altre finestre (giro 4c, 6 ottobre 2026; W93): la ConfermaWeb e la finestra degli avatar
   hanno fondo PIENO #161b22, bordo di 2px bianco al 20 % e raggio 14px; i menu dei puntini erano diversi: quello della dashboard e delle
   pagine di gestione (.dash-menu) trasparente al 96 % con bordo da 1px e raggio 12, quello delle sezioni (.sidebar-main-container, il menu
   di Live, Film, Serie e delle schede) nero col bordo oro e raggio 10. Qui tutti come le finestre, solo nel browser (sui TV com'erano).
   Il menu delle sezioni ha zoom 1.2 (sidebar.css): bordo e raggio divisi per 1.2, a video 2px e 14px come gli altri.
   Dal 10 ottobre 2026 il menu e' UNO (components/MenuPuntini.js, css/menuPuntini.css): questa riga vale per tutte le pagine. */
html.web .dash-menu { background: #161b22; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 14px; }
/* sul telefono le righe sono da 48, in TUTTE le pagine (10 ottobre 2026, come l'APK in touch): la tela e' bassa (740x304 = ~530 px della
   tela) e otto voci da 60 sotto i puntini uscivano dallo schermo. Da 44 dal 16 ottobre 2026 (punto 30b): con "Schermo intero" le sezioni
   hanno nove voci, e da 48 l'ultima usciva (W143s, 740x304: 112 + 9 x 44 + 20 = 528 su 553) */
html.web.web-telefono .dash-voce { height: 44px; }

/* L'INTESTAZIONE UNICA (giro 4b, 6 ottobre 2026; decisioni 53 e 54, come Android 0.1.60): i tre puntini nello STESSO cerchio da 64 della
   dashboard (.dash-puntini) in alto a destra in ogni pagina: nelle sezioni (IntestazioneSezione, l'svg dei tre pallini) e nelle pagine di
   gestione (components/IntestazioneWeb.js, che porta anche la freccia a sinistra e il titolo). L'anello del fuoco delle sezioni
   (box-shadow) legge il raggio dall'elemento: resta rotondo. */
html.web .intestazione-menu {
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
html.web .intestazione-menu > svg { width: 9px; height: 36px; }
html.web .intestazione-web { padding: 30px 60px 0; box-sizing: border-box; flex: 0 0 auto; }
/* dentro una pagina che ha gia' i suoi margini (Gestisci profili, Chi sta guardando?) la testata non li raddoppia */
html.web .gp-pagina > .intestazione-web, html.web .pf-pagina > .intestazione-web { padding: 0 0 10px; }
html.web .pf-pagina > .intestazione-web { min-height: 110px; }
html.web .intestazione-web .intestazione-titolo { font-size: 44px; }
html.web .intestazione-web-menu { position: absolute; top: 130px; right: 60px; z-index: 60; }
html.web .intestazione-web-menu .dash-voce { cursor: pointer; }
/* le Impostazioni e Il mio account: via il pulsante Indietro in fondo (la freccia e Esc) */
html.web .impw-lista { margin-top: 20px; }

/* LA PAGINA CATEGORIE (giro 4b, 6 ottobre 2026; decisioni 50-51; pages/CategoriePage.js, solo nel browser): una pagina a scroll unico;
   l'intestazione e i tre selettori restano in cima (sticky dentro la pagina che scorre); la lista sotto con la posizione, il nome e le
   frecce; la spenta in grigio col testo "spenta"; le XXX del bambino col lucchetto. */
html.web .cat-pagina { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 60px 30px; box-sizing: border-box; font-family: "Poppins", sans-serif; color: #fff; }
/* GIRO 4c (6 ottobre 2026): la testata e i selettori in UN blocco fermo (.cat-testa, sticky in cima). Prima erano due sticky, i selettori
   a top: 124px fissi mentre la testata e' alta 95: anche in cima i selettori stavano 29 px piu' in basso del loro posto, sopra la prima
   riga (misurato: selettori 124-211, prima riga da 182; sul telefono 110-188 e da 173). W92. */
html.web .cat-testa { position: sticky; top: 0; z-index: 3; padding-top: 30px; background: #000; }   /* pieno: le righe che scorrono sotto non si vedono attraverso */
html.web .cat-testa > .intestazione-web { padding: 0; }
html.web .cat-selettori { display: flex; flex-wrap: wrap; padding: 14px 0 10px; }
html.web .cat-selettore { margin: 0 14px 6px 0; padding: 8px 22px; border-radius: 22px; border: 3px solid transparent; background: rgba(255, 255, 255, 0.2); color: #fff; font-family: "Poppins", sans-serif; font-size: 24px; font-weight: 600; cursor: pointer; outline: none; }
html.web .cat-selettore.cat-attivo { background: #e7a101; color: #111; }
html.web .cat-selettore.cat-focused { border-color: #fff; box-shadow: 0 0 0 3px #e7a101; }
html.web .cat-lista { display: flex; flex-direction: column; }
html.web .cat-riga { display: flex; align-items: center; padding: 12px 24px; margin-bottom: 8px; border-radius: 12px; background: #0d0d0d; border: 2px solid #333; font-size: 28px; cursor: pointer; }
html.web .cat-riga.cat-focused { border-color: #e7a101; box-shadow: 0 0 0 3px #e7a101; }
html.web .cat-riga.cat-off { color: #888; }
html.web .cat-riga.cat-lucchettata { cursor: default; color: #888; }
html.web .cat-numero { width: 64px; flex: 0 0 auto; color: #e7a101; font-weight: 600; }
html.web .cat-off .cat-numero { color: #888; }
html.web .cat-nome { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.web .cat-spenta-testo { font-size: 22px; color: #888; margin-left: 10px; }
html.web .cat-lucchetto { color: #888; margin-left: 10px; }
html.web .cat-freccia { width: 56px; height: 44px; margin-left: 10px; border-radius: 8px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.13); color: #fff; font-size: 20px; cursor: pointer; outline: none; flex: 0 0 auto; }
html.web .cat-freccia.cat-ferma { color: rgba(255, 255, 255, 0.3); cursor: default; }
html.web .cat-freccia.cat-focused { border-color: #e7a101; background: rgba(231, 161, 1, 0.25); box-shadow: 0 0 0 2px #e7a101; }
html.web .cat-vuota { padding: 20px 0; font-size: 26px; color: #aaa; }
html.web .cat-guida { margin-top: 10px; font-size: 20px; color: rgba(255, 255, 255, 0.7); }
html.web.web-telefono .cat-pagina { padding: 0 30px 20px; }
html.web.web-telefono .cat-selettore { font-size: 20px; padding: 6px 16px; }
html.web.web-telefono .cat-riga { font-size: 24px; padding: 8px 18px; margin-bottom: 6px; }
html.web.web-telefono .cat-freccia { width: 48px; height: 38px; }

/* IL DIALOGO SI'/NO (giro 4b, 6 ottobre 2026; components/ConfermaWeb.js, solo nel browser): velo e riquadro attaccati al body, il
   fuoco parte su No (decisione 55), l'anello oro come sui pulsanti di Gestisci profili. */
html.web .cw-velo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 80; }
html.web .cw-riquadro { background: #161b22; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 14px; padding: 36px 44px; max-width: 1100px; display: flex; flex-direction: column; align-items: center; font-family: "Poppins", sans-serif; color: #fff; }
html.web .cw-testo { font-size: 30px; text-align: center; margin-bottom: 22px; }
html.web .cw-tasti { display: flex; }
html.web .cw-pulsante { margin: 0 12px; padding: 14px 44px; font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, 0.12); border: 3px solid rgba(255, 255, 255, 0.25); border-radius: 8px; cursor: pointer; outline: none; }
html.web .cw-pulsante.cw-focused { border-color: #e7a101; background: rgba(231, 161, 1, 0.2); }
html.web.web-telefono .cw-riquadro { padding: 20px 26px; max-width: 80%; }
html.web.web-telefono .cw-testo { font-size: 24px; }
html.web.web-telefono .cw-pulsante { font-size: 22px; padding: 8px 30px; }

/* L'OSD DELLA DIRETTA (giro 4b, 6 ottobre 2026; Osd.js con o.canali, solo nel browser): CH- e CH+ come due pulsanti rotondi ai lati del
   play, con la sola scritta sotto la freccia; il play resta al centro dello schermo. */
html.web .osd-centro { display: flex; align-items: center; }
html.web .osd .osd-ch { width: 96px; height: 96px; margin: 0 44px; padding: 0; border-radius: 50%; flex-direction: column; justify-content: center; font-size: 30px; line-height: 1; }
html.web .osd .osd-ch > * + * { margin-left: 0; margin-top: 6px; }
html.web .osd .osd-ch span { font-size: 18px; font-weight: 600; letter-spacing: 1px; }
html.web.web-telefono .osd .osd-ch { width: 72px; height: 72px; margin: 0 30px; font-size: 24px; }
/* Ep- ed Ep+ (giro 4c, 6 ottobre 2026; Osd.js con o.episodi): gli stessi cerchi di CH-/CH+; senza vicino SPENTI (come Android: 0,35, niente
   anello, il fuoco li salta, il clic non fa niente). */
html.web .osd .osd-ep.osd-spento { opacity: 0.35; cursor: default; box-shadow: none; }
html.web.web-telefono .osd .osd-ch span { font-size: 15px; }

/* L'OSD COMPATTO SUL TELEFONO (7 ottobre 2026, la Live e il VOD sul telefono, forma 3; dalla diagnosi 2026-10-07-1150 §3, misure
   del banco osd-misura). Vale SOLO sotto html.web.web-telefono: sui TV (niente .web) e sul PC (niente .web-telefono) nessuna regola
   si applica; osd.css e videoJsPlayer.css non cambiano. Ultimo foglio di index.html: vince per ordine e per specificita'.
   DUE SPAZI DI MISURA:
   - VOD: l'OSD sta in .video-js-player-container, DENTRO la tela scalata (scala 0,55; tela 1345x553 Samsung, 1364x622 iPhone):
     1 px CSS = 0,55 px a video.
   - LIVE a schermo intero (Chrome Android): .live-video-player-div e' position:fixed dentro l'elemento a schermo intero (top
     layer): le trasformazioni del body NON valgono, i px CSS sono quelli della FINESTRA VERA (740x304): font 26 px = 26 px a video,
     il tasto era alto 63 px = 21 % dello schermo. Per questo le misure della Live sono ~0,55 x quelle del VOD. */
/* ===== VOD (tela 1345x553 / 1364x622) ===== */
/* 1. riga alta: font 26 -> 20, padding 12/22 -> 8/16 (alto 40 px di tela = 22 px a video; era 63 = 35 px), piu' vicina al bordo */
html.web.web-telefono .osd-vod .osd-alto { top: 14px; left: 24px; }
html.web.web-telefono .osd-vod .osd-alto > * + * { margin-left: 12px; }
html.web.web-telefono .osd-vod .osd-btn { font-size: 20px; padding: 8px 16px; border-radius: 10px; }
html.web.web-telefono .osd-vod .osd-btn > * + * { margin-left: 8px; }
html.web.web-telefono .osd-vod .osd-privacy { top: 14px; right: 24px; font-size: 20px; padding: 8px 12px; }
/* 2. il play: 130 -> 80 (44 px a video), centrato a 276: 236..316 di tela */
html.web.web-telefono .osd-vod .osd-play { width: 80px; height: 80px; font-size: 34px; border-radius: 50%; }
html.web.web-telefono .osd-vod .osd-ch { border-radius: 50%; }   /* Ep-/Ep+ restano cerchi (W95): la regola della riga alta qui sopra vince per specificita' sul 50% del giro 4b */
/* 3. la striscia del seek: zoom 2 -> 1.2 (110 x 1,2 = 132 px di tela = 73 px a video, il 24 % della finestra; era 220 = 121 px,
      il 40 %). Il cursore del range resta toccabile (73 px). Il velo poggia su di lei: bottom = 132 + 4. */
html.web.web-telefono .custom-video-controls { zoom: 1.2; }
/* 4. il velo: NIENTE trama (la scheda l'ha appena mostrata), nome e S01 E02 su UNA riga ciascuno (gia' nowrap + ellissi in osd.css),
      padding stretto. Altezza del velo: 24 + 31 (canale 26 px) + 12 = 67 (film), + 26 (titolo) = 93 (episodio): il bordo alto sta a
      553 - 136 - 93 = 324 di tela, sotto il play (316) e lontano dalla riga alta (14 + 40 = 54). max-height 25 % = guardia. */
html.web.web-telefono .osd-vod .osd-basso { bottom: 136px; padding: 24px 30px 12px; max-height: 25%; }
html.web.web-telefono .osd-vod .osd-canale { font-size: 26px; }
html.web.web-telefono .osd-vod .osd-titolo { font-size: 20px; margin-top: 2px; }
html.web.web-telefono .osd-vod .osd-epg { display: none; }
/* 5. la tendina Audio sotto la riga alta compatta */
html.web.web-telefono .osd-vod .osd-tendina { top: 62px; left: 24px; min-width: 260px; }
html.web.web-telefono .osd-vod .osd-tendina-titolo { font-size: 18px; }
html.web.web-telefono .osd-vod .osd-tendina-voce { font-size: 20px; padding: 8px 18px; }
/* ===== LIVE a schermo intero (finestra vera 740x304 / 750x342: px NON scalati) ===== */
/* 1. riga alta: font 26 -> 14, padding 12/22 -> 6/12 (alto ~29 px = 9,5 % della finestra; era 63 = 21 %); "Privacy ON" stessa
      misura (a 26 px copriva Audio: misurato, x 555..740 contro Audio 485..650) */
html.web.web-telefono .osd-live .osd-alto { top: 10px; left: 14px; }
html.web.web-telefono .osd-live .osd-alto > * + * { margin-left: 8px; }
html.web.web-telefono .osd-live .osd-btn { font-size: 14px; padding: 6px 12px; border-radius: 8px; }
html.web.web-telefono .osd-live .osd-btn > * + * { margin-left: 6px; }
html.web.web-telefono .osd-live .osd-btn.osd-fuoco { box-shadow: 0 0 0 2px var(--gold); }
html.web.web-telefono .osd-live .osd-privacy { top: 10px; right: 14px; font-size: 14px; padding: 6px 10px; }
/* 2. play 130 -> 56 (124..180 a 304), CH-/CH+ 72 -> 44 (le regole del giro 4b qui sopra pensavano a px di tela: a schermo intero
      sono px veri, 72 = 24 % dello schermo) */
html.web.web-telefono .osd-live .osd-play { width: 56px; height: 56px; font-size: 24px; border-radius: 50%; }
html.web.web-telefono .osd-live .osd-ch { width: 44px; height: 44px; margin: 0 18px; font-size: 16px; border-radius: 50%; }   /* CH-/CH+ restano cerchi (W87) */
html.web.web-telefono .osd-live .osd-ch span { font-size: 10px; }
/* 3. il velo: canale e programma in onda su una riga ciascuno (gia' nowrap), NIENTE descrizione ne' "dopo": 20 + 22 + 19 + 8 = 69 px,
      bordo alto a 304 - 69 = 235, sotto il play (180) e i CH (174); max-height 30 % = 91 di guardia (era 60 % = 182, sopra il play) */
html.web.web-telefono .osd-live .osd-basso { padding: 20px 20px 8px; max-height: 30%; }
html.web.web-telefono .osd-live .osd-canale { font-size: 18px; }
html.web.web-telefono .osd-live .osd-titolo { font-size: 14px; margin-top: 2px; }
html.web.web-telefono .osd-live .osd-epg { display: none; }
/* 4. la tendina Audio */
html.web.web-telefono .osd-live .osd-tendina { top: 44px; left: 14px; min-width: 180px; padding: 6px 0; }
html.web.web-telefono .osd-live .osd-tendina-titolo { font-size: 13px; margin: 0 12px 4px; }
html.web.web-telefono .osd-live .osd-tendina-voce { font-size: 14px; padding: 5px 12px; }

/* ---- LA SCHERMATA DEL PIN ALL'AVVIO (8 ottobre 2026, giro web; decisione C, mock C del disegno 2026-10-07-2305; ListPlaylistPage.paginaPin):
   sulla tela 1920x1080 in colonna (logo, avatar, nome, "Inserisci il PIN", quattro punti, tastierino, Cambia profilo, la nota); sul
   telefono l'avatar a sinistra e il tastierino a destra. Solo nel browser. */
html.web .pf-pin-pagina { justify-content: center; padding: 30px 60px; }
html.web .pf-pin-logo { height: 80px; margin-bottom: 18px; }
html.web .pf-pin { display: flex; flex-direction: column; align-items: center; font-family: "Poppins", sans-serif; color: #fff; }
html.web .pf-pin-chi { display: flex; flex-direction: column; align-items: center; }
html.web .pf-pin-avatar { width: 170px; height: 170px; border: 4px solid rgba(255, 255, 255, 0.6); }
html.web .pf-pin-nome { margin-top: 12px; font-size: 44px; font-weight: 800; max-width: 700px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.web .pf-pin-titolo { margin-top: 4px; font-size: 26px; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
html.web .pf-pin-punti { display: flex; margin: 18px 0 22px; }
html.web .pf-pin-punto { width: 22px; height: 22px; margin: 0 10px; border-radius: 50%; border: 3px solid #fff; box-sizing: border-box; }
html.web .pf-pin-punto.pf-pin-pieno { background: #fff; }
html.web .pf-pin-tastierino { display: flex; flex-wrap: wrap; width: 312px; }
html.web .pf-pin-tasto { width: 92px; height: 74px; margin: 6px 6px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.1); color: #fff; font-family: "Poppins", sans-serif; font-size: 32px; font-weight: 600; cursor: pointer; outline: none; padding: 0; }
html.web .pf-pin-tasto.pf-fuoco { background: #e7a101; border-color: #e7a101; color: #111; }
html.web .pf-pin-spento .pf-pin-tasto { opacity: 0.3; cursor: default; }
html.web .pf-pin-cambia { display: flex; align-items: center; margin-top: 22px; padding: 10px 28px 10px 14px; border-radius: 40px; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.25); color: #fff; font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 600; cursor: pointer; outline: none; }
html.web .pf-pin-cambia.pf-fuoco { background: #e7a101; border-color: #e7a101; color: #111; }
html.web .pf-pin-mini { display: flex; margin-right: 12px; }
html.web .pf-pin-mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: -10px; border: 2px solid rgba(0, 0, 0, 0.4); }
html.web .pf-pin-mini img:last-child { margin-right: 0; }
html.web .pf-pin-nota { margin-top: 16px; max-width: 1100px; font-size: 18px; color: rgba(255, 255, 255, 0.6); text-align: center; }
/* il telefono: l'avatar, il nome, i punti e Cambia profilo a sinistra; il tastierino a destra; niente logo */
html.web.web-telefono .pf-pin-pagina { padding: 16px 40px; }
html.web.web-telefono .pf-pin-logo { display: none; }
html.web.web-telefono .pf-pin { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; align-items: center; justify-items: center; }
html.web.web-telefono .pf-pin-chi { grid-column: 1; grid-row: 1; margin-right: 110px; }
html.web.web-telefono .pf-pin-cambia { grid-column: 1; grid-row: 2; margin: 6px 110px 0 0; font-size: 30px; }
html.web.web-telefono .pf-pin-tastierino { grid-column: 2; grid-row: 1 / span 2; width: 396px; }
html.web.web-telefono .pf-pin-tasto { width: 120px; height: 98px; font-size: 40px; }
html.web.web-telefono .pf-pin-nota { grid-column: 1 / span 2; grid-row: 3; margin-top: 10px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1100px; }
html.web.web-telefono .pf-pin-avatar { width: 150px; height: 150px; }

/* ---- LE TESSERE CON LA LOCANDINA (8 ottobre 2026, giro web; decisione A2 "Tutta locandina", disegno 2026-10-07-2305 §A; DashboardPage):
   la banda in alto (icona piccola e nome su una riga) sul colore della tessera, l'immagine che riempie il resto, in fondo la sfumatura nel
   colore della sezione col titolo e la barra. La diretta col picon: il piatto scuro. Misure sulla tela 1920x1080 (tessera 390x560). */
html.web .dash .dash-tessera.dash-locandina { justify-content: flex-start; align-items: stretch; padding: 0; }
html.web .dash .dash-banda { flex: none; height: 66px; display: flex; align-items: center; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 3; color: #fff; }
html.web .dash .dash-banda i { font-size: 26px; width: 34px; margin-right: 10px; text-align: center; }
html.web .dash .dash-banda .menu-title { display: block; flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; font-size: 28px; font-weight: 800; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.web .dash .dash-diretta .dash-banda { background: #c04a60; }
html.web .dash .dash-film .dash-banda { background: #ffae1f; }
html.web .dash .dash-serie .dash-banda { background: #3f8dc6; }
html.web .dash .dash-corpo { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
html.web .dash .dash-pieno { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
html.web .dash .dash-piatto { position: absolute; top: 22px; left: 22px; right: 22px; bottom: 96px; border-radius: 14px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.14); display: flex; align-items: center; justify-content: center; }
html.web .dash .dash-piatto img { width: 78%; height: 70%; object-fit: contain; }
html.web .dash .dash-velo { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 2; }
html.web .dash .dash-col-piatto .dash-velo { display: none; }
html.web .dash .dash-diretta .dash-velo { background: linear-gradient(180deg, rgba(110, 31, 49, 0), rgba(110, 31, 49, 0.9) 62%, #6e1f31); }
html.web .dash .dash-film .dash-velo { background: linear-gradient(180deg, rgba(229, 96, 10, 0), rgba(229, 96, 10, 0.9) 62%, #e5600a); }
html.web .dash .dash-serie .dash-velo { background: linear-gradient(180deg, rgba(28, 86, 135, 0), rgba(28, 86, 135, 0.9) 62%, #1c5687); }
html.web .dash .dash-piede { position: relative; z-index: 3; padding: 0 20px 24px; color: #fff; }
html.web .dash .dash-tit { font-size: 28px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.web .dash .dash-barra { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); margin-top: 10px; overflow: hidden; }
html.web .dash .dash-barra b { display: block; height: 100%; background: #fff; border-radius: 4px; }
/* il telefono: la tessera e' quasi quadrata (144x139 px CSS sul Samsung): banda e piede piu' fitti, la scritta resta su una riga */
html.web.web-telefono .dash .dash-banda { height: 58px; padding: 0 12px; }
html.web.web-telefono .dash .dash-banda i { font-size: 22px; width: 26px; margin-right: 8px; }
html.web.web-telefono .dash .dash-tessere-4 .dash-tessera.dash-locandina .dash-banda .menu-title, html.web.web-telefono .dash .dash-tessera.dash-locandina .dash-banda .menu-title { font-size: 24px; }
html.web.web-telefono .dash .dash-piede { padding: 0 16px 18px; }
html.web.web-telefono .dash .dash-piatto { bottom: 70px; top: 14px; left: 16px; right: 16px; }

/* ---- LE PAGINE CHE SCORRONO SUL TELEFONO (12 ottobre 2026, giro web; segnalazione dell'operatore su Chrome Android; banco W200-W203,
   test-web-scorre-chromium-a|b|d). In modalita' telefono la tela e' larga 654-750 px in verticale e bassa 553 in orizzontale: le
   Impostazioni (lista larga 1100 e alta 860 dentro un body che non scorre) uscivano a destra e in fondo, "Il mio account" (il pannello
   del TV con zoom 1,3 x 1,1) era tagliato senza scorrere, "Chi sta guardando?" metteva cinque profili su una riga piu' larga della tela.
   Qui le tre pagine diventano UNA pagina che scorre col dito, alta quanto la tela, con le voci a tutta larghezza; la testata unica perde
   l'ora sulla tela stretta (l'ora del telefono e' gia' in cima allo schermo). Solo sotto html.web.web-telefono: sul PC e
   sui TV niente cambia. */
html.web.web-telefono .settings-container.impw,
html.web.web-telefono .account-page-container,
html.web.web-telefono .pf-pagina {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
html.web.web-telefono .settings-container.impw { padding: 0 24px 40px; }
html.web.web-telefono .impw-lista { width: auto; max-height: none; overflow: visible; margin: 16px 0 0; }
html.web.web-telefono .impw-riga { padding: 18px 22px; }
html.web.web-telefono .impw-testi { min-width: 0; flex: 1 1 auto; }
html.web.web-telefono .impw-valore { margin-left: 20px; flex: 0 0 auto; }
html.web.web-telefono .settings-container.impw > .intestazione-web { padding: 24px 0 0; }
/* Il mio account: il pannello senza gli zoom del TV, a tutta larghezza; etichetta a sinistra e valore a destra, che va a capo da solo */
html.web.web-telefono .account-page-container { padding: 0 24px 40px; }
html.web.web-telefono .account-page-container > .intestazione-web { padding: 24px 0 0; }
html.web.web-telefono .account-page-container .clear-wrap { zoom: 1; height: auto; display: block; padding: 16px 0 0; }
html.web.web-telefono .account-page-container .clear-panel { width: auto; padding: 24px 26px 12px; }
html.web.web-telefono .account-page-content { zoom: 1; }
html.web.web-telefono .account-item { align-items: flex-start; padding: 10px 6px; margin-bottom: 6px; }
html.web.web-telefono .account-item p { font-size: 28px; margin: 0; }
html.web.web-telefono .account-item p:first-child { flex: 1 1 auto; min-width: 0; margin-right: 24px; }
/* il valore non si stringe (0 / 2 andava a capo): va a capo solo oltre il 60% della riga (il dispositivo, la data) */
html.web.web-telefono .account-item p:last-child { flex: 0 0 auto; max-width: 60%; text-align: right; overflow-wrap: anywhere; }
/* Chi sta guardando?: le schede vanno a capo, la pagina scorre fino ai pulsanti */
html.web.web-telefono .pf-pagina { justify-content: flex-start; padding: 20px 24px 30px; }
html.web.web-telefono .pf-pagina > * { flex-shrink: 0; }
html.web.web-telefono .pf-file { flex: 0 0 auto; overflow: visible; justify-content: flex-start; width: 100%; }
html.web.web-telefono .pf-profili { flex-wrap: wrap; justify-content: center; }
html.web.web-telefono .pf-profilo { margin: 0 6px 14px; }
html.web.web-telefono .pf-avatar { width: 160px; height: 160px; }
html.web.web-telefono .pf-nome { font-size: 30px; max-width: 200px; }
html.web.web-telefono .pf-pulsanti { flex-wrap: wrap; margin-top: 6px; }
html.web.web-telefono .pf-pulsante { margin: 0 10px 14px; }
html.web.web-telefono .pf-pagina > .intestazione-web { width: 100%; min-height: 0; padding: 4px 0 10px; }
/* la testata unica sulla tela stretta (html.web-tela-stretta, config/piattaforma.js: il telefono in verticale): niente ora, freccia e titolo a
   sinistra, i puntini a destra */
html.web.web-tela-stretta .intestazione-web .intestazione-orologio { display: none; }
html.web.web-tela-stretta .intestazione-web .intestazione-destra > * + * { margin-left: 0; }
/* L'AVVISO DELLA SCHERMATA HOME SU iPHONE (16 ottobre 2026, punto 30b; config/web-input.js 19): nel body, quindi sulla tela (ruotata con
   la pagina in verticale), in basso al centro, sopra la pagina e sotto il foglio dei campi; discreto: una riga e il gesto, la X per chiudere. */
html.web .web-avviso-home {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 1999990;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 1500px;
  width: 90%;
  padding: 12px 16px 12px 26px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 26, 30, 0.94);
  color: #fff;
  font-family: Poppins, Arial, sans-serif;
  font-size: 26px;
  line-height: 1.3;
}
html.web .web-avviso-home-icona { flex: none; margin-right: 22px; font-size: 34px; color: var(--gold, #e7a101); }
html.web .web-avviso-home-testo { flex: 1 1 auto; min-width: 0; }
html.web .web-avviso-home-gesto { margin-top: 4px; font-weight: 700; color: var(--gold, #e7a101); }
html.web .web-avviso-home-chiudi {
  flex: none;
  margin-left: 20px;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 28px;
  line-height: 64px;
  padding: 0;
  cursor: pointer;
}