/* Home · otto canali da zappare, nei «fosfori smorzati».
   Fondo quasi nero e inchiostro bianco tenue, come un Televideo vero di sera. I colori del Televideo ci sono,
   ma smorzati e solo in bande sottili e piccoli dettagli: ogni canale si riconosce dalla sua banda, dalla sua
   composizione e dal suo dettaglio vivo, mai da un campo di colore pieno.
   Ogni canale è alto esattamente uno schermo e non scorre mai dentro: lo spazio che avanza lo prende un quadro
   (.riempi) che si allarga o si stringe; il testo non si rimpicciolisce mai.
   Un carattere solo, Archivo (larghezza 62–125). Movimento: transform e opacity. */

:root {
  --fondo: #0e1116;
  --fondo-2: #151a21;
  --fondo-3: #1d232c;
  --targa: #07090c;
  --inchiostro: #e8ecf0;
  --tenue: #9aa3ad;
  --spento: #646d78;
  --rosso: #8c3a34;
  --verde: #3f7a45;
  --ocra: #a88b3a;
  --petrolio: #3e7f86;
  --blu: #2c3f86;
  --fosforo: #9fd3a0;
  --g-rosso: #a8443c;
  --g-ciano: #3e8f96;

  --m: clamp(16px, 2.4vw, 36px);
  --g: clamp(16px, 2.2vw, 32px);
  --cima: 84px;
  --piede: 28px;
  --banda: 6px;
  --a: "Archivo", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* taste-skill-ignore: solo per il codice vero, dentro <pre>/<code> (terminale, classe, nomi dei campi) */
  --s-head: clamp(2.5rem, 5.2vw, 5.25rem);
  --s-sub: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --s-lead: clamp(1.1875rem, 1rem + 0.55vw, 1.5rem);
  --s-body: 1.125rem;
  --s-small: 0.9375rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --righe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='3'%3E%3Crect y='2' width='8' height='1' fill='%23000' fill-opacity='.5'/%3E%3C/svg%3E");
  --retino: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.5' cy='3.5' r='2.6' fill='%23e8ecf0'/%3E%3C/svg%3E");
  --schermo: 100vh;
}
@supports (height: 100dvh) { :root { --schermo: 100dvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; background: var(--fondo); color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-width: none; overscroll-behavior-y: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; font-family: var(--a); font-size: var(--s-body); line-height: 1.5; color: var(--inchiostro); background: var(--fondo); -webkit-font-smoothing: antialiased; }
::selection { background: var(--fosforo); color: var(--targa); }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fosforo); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.salta { position: absolute; left: var(--m); top: -100px; z-index: 90; padding: 12px 16px; background: var(--inchiostro); color: var(--targa); font-weight: 700; }
.salta:focus { top: 12px; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- l'apparecchio: le targhe dell'OSD (prova A) e il telecomando ---------- */
.apparecchio { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
  padding: max(14px, env(safe-area-inset-top)) var(--m) 0; pointer-events: none; }
.apparecchio > * { pointer-events: auto; }
.osd { margin: 0; padding: 7px 11px 6px; background: var(--targa); color: var(--fosforo); font-weight: 800; font-stretch: 112.5%;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.osd i { font-style: normal; color: var(--inchiostro); margin-left: 0.35em; }
.osd i[hidden] { display: none; }
.osd span { color: var(--inchiostro); font-weight: 600; font-stretch: 100%; margin-left: 0.3em; }
.osd-pag { margin-left: 8px; flex: none; }
.osd-ch { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.osd-pag b { display: inline-block; min-width: 2.6em; }
/* mentre cerca: il numero della pagina gira in bianco, il nome del canale dice «Ricerca» (come /televideo/) */
.cerca .osd-pag b { color: var(--inchiostro); }
.cerca .osd-ch span { color: var(--fosforo); }
.telecomando { margin-left: auto; display: none; gap: 4px; align-items: center; }
.js .telecomando { display: flex; }
.t-ch, .t-tasti a { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: var(--targa); color: var(--inchiostro);
  font: 700 var(--s-body)/1 var(--a); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.t-ch svg { width: 18px; height: 18px; }
.t-tasti { display: flex; gap: 4px; margin-left: 6px; }
.t-tasti a { font-variant-numeric: tabular-nums; }
.t-tasti a[aria-current="true"] { background: var(--fosforo); color: var(--targa); }
.t-ch:active, .t-tasti a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .t-ch:hover, .t-tasti a:not([aria-current="true"]):hover { background: var(--fondo-3); } }
.via-germi { flex: none; height: 40px; margin-left: 6px; padding: 0 14px; border: 0; background: var(--rosso); color: var(--inchiostro); font: 700 16px/1 var(--a); cursor: pointer; transition: transform 120ms var(--ease-out); }
.via-germi:active { transform: scale(0.96); }

/* il disturbo tra un canale e l'altro: sotto l'OSD, sopra il quadro */
.statico { position: fixed; z-index: 55; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; opacity: 0; visibility: hidden; }
.statico.va { visibility: visible; }

/* ---------- lo schermo: ogni canale (o ogni sua sottopagina, su telefono basso) è alto esattamente un viewport ---------- */
.canale { position: relative; height: var(--schermo); scroll-snap-align: start; scroll-snap-stop: always; overflow: clip; display: flex; flex-direction: column; background: var(--fondo); }
.canale:focus, .pagina:focus { outline: none; }
.pagina { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dentro { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: var(--cima) var(--m) var(--piede); will-change: transform; }
.testa h2, .ch8 h2 { font-size: var(--s-head); font-weight: 850; line-height: 0.92; letter-spacing: -0.035em; text-wrap: balance; }
.lead { font-size: var(--s-lead); line-height: 1.38; max-width: 34em; text-wrap: pretty; }
.testa .lead { margin-top: clamp(12px, 1.6vh, 20px); }

/* la banda: il solo posto dove il colore del canale è pieno */
.banda { display: block; flex: none; height: var(--banda); background: var(--tinta, var(--rosso)); }

/* il quadro che riempie: prende lo spazio che avanza; se ne resta troppo poco, sparisce (mai testo più piccolo) */
.riempi { flex: 1 1 0; min-height: 0; container-type: size; position: relative; }
.quadro { position: relative; overflow: hidden; background: var(--fondo-2); }
.riempi > .quadro { position: absolute; inset: 0; }
@container (max-height: 64px) { .riempi > .quadro { display: none; } }

/* il disturbo sui titoli (prova A): il rosso e il ciano, smorzati, si staccano e poi agganciano */
.fantasma { position: relative; isolation: isolate; }
.fantasma::before, .fantasma::after, .nome .riga::before, .nome .riga::after, .email .riga::before, .email .riga::after { content: attr(data-t); position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--go, 0); mix-blend-mode: screen; }
.fantasma::before, .nome .riga::before, .email .riga::before { color: var(--g-rosso); transform: translateX(var(--sp, 0px)); }
.fantasma::after, .nome .riga::after, .email .riga::after { color: var(--g-ciano); transform: translateX(calc(var(--sp, 0px) * -1)); }
.nome::before, .nome::after { content: none; }

.tasto { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 22px; border: 0; border-radius: 0; font: 700 var(--s-body)/1.2 var(--a);
  text-decoration: none; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 120ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
.tasto:active { transform: scale(0.97); }
.tasto-primo { background: var(--ocra); color: var(--targa); }
.tasto-secondo { background: var(--fondo-3); color: var(--inchiostro); }
@media (hover: hover) and (pointer: fine) {
  .tasto-primo:hover { background: #bda054; }
  .tasto-secondo:hover { background: #2a313c; }
}
.azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.nido { position: absolute; right: 12px; top: 12px; width: 76px; height: 76px; pointer-events: none; z-index: 3; }
.nido .germe { pointer-events: auto; }
.senza-germi .germe, .senza-germi .via-germi { display: none !important; }

/* ---------- CH 1 · Chi sono: i tetti con le antenne a retino che si sintonizzano, il nome a tutta larghezza ---------- */
.ch1 { --tinta: var(--rosso); }
.ch1 .dentro { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: clamp(20px, 3vw, 48px); row-gap: 0;
  grid-template-areas: "testo quadro" "banda banda" "nome nome"; }
.ch1-quadro { grid-area: quadro; position: relative; min-height: 0; display: flex; flex-direction: column; margin-bottom: clamp(14px, 2.4vh, 28px); }
.tubo { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: 12px; background: var(--fondo); container-type: size; }
@container (max-height: 199px) { .nido-tubo { display: none; } }
.tubo::after { content: ""; position: absolute; inset: 0; background-image: var(--righe); background-size: 8px 3px; opacity: 0.55; pointer-events: none; z-index: 1; }
/* la foto a retino resta nitida sotto; il CRT la copre solo mentre il quadro perde e ritrova la sintonia */
.antenne { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: 0.86; filter: contrast(1.05); }
.crt { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.sottopancia { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: stretch; max-width: calc(100% - 28px); }
.frase { background: var(--inchiostro); color: var(--targa); font-weight: 600; font-size: var(--s-body); line-height: 1.3; padding: 10px 14px; }
.altra { flex: none; border: 0; background: var(--targa); color: var(--fosforo); font-weight: 700; font-size: var(--s-small); padding: 0 14px; cursor: pointer; min-height: 44px;
  transition: color 160ms ease, transform 120ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
.altra:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .altra:hover { color: var(--inchiostro); } }
html:not(.js) .altra { display: none; }
.ch1-testo { grid-area: testo; align-self: end; display: flex; flex-direction: column; gap: clamp(18px, 3vh, 32px); min-width: 0; margin-bottom: clamp(14px, 2.4vh, 28px); }
.ruolo { font-size: var(--s-sub); font-weight: 800; font-stretch: 92%; line-height: 1.08; letter-spacing: -0.015em; max-width: 13em; text-wrap: balance; }
.stack { margin-top: clamp(8px, 1.4vh, 14px); font-size: var(--s-lead); line-height: 1.35; color: var(--tenue); max-width: 26em; text-wrap: pretty; }
.scorri { display: none; font-size: var(--s-small); color: var(--tenue); }
.altra-icona { display: none; font-size: 1.375rem; line-height: 1; font-weight: 600; }
.guida-come { font-size: var(--s-small); color: var(--tenue); margin-bottom: 10px; }
.come-tasti { display: none; }
@media (hover: hover) and (pointer: fine) { .come-tasti { display: inline; } .come-tocco { display: none; } }
.guida ul { display: flex; flex-wrap: wrap; gap: 6px; }
.guida a { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 12px; background: var(--fondo-2); text-decoration: none; font-weight: 700; font-size: var(--s-small); transition: background-color 150ms ease; }
.guida a b { color: var(--fosforo); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .guida a:hover { background: var(--fondo-3); } }
.banda-ch1 { grid-area: banda; margin: 0 calc(-1 * var(--m)) clamp(10px, 1.6vh, 18px); }
.nome { grid-area: nome; position: relative; font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 14.2vw; line-height: 0.8; letter-spacing: -0.045em; padding-bottom: 0.05em; }
.nome .riga { position: relative; display: block; white-space: nowrap; isolation: isolate; will-change: transform; }
.nome .riga + .riga { text-align: right; }
.nome::after { content: ""; position: absolute; inset: 0; background-image: var(--righe); background-size: 8px 3px; opacity: 0.4; pointer-events: none; }
.nido-tubo { right: 14px; top: auto; bottom: 14px; width: 92px; height: 92px; }

/* ---------- CH 2 · Il codice: il palinsesto dello stack e il terminale che lo manda in onda ---------- */
.ch2 { --tinta: var(--blu); }
.ch2 .dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px);
  grid-template-areas: "testa term" "pal term"; }
.ch2 .testa { grid-area: testa; }
.palinsesto { grid-area: pal; display: flex; flex-direction: column; justify-content: space-evenly; gap: clamp(18px, 3.4vh, 40px); padding-top: 28px; }
.palinsesto li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.palinsesto li::before { content: ""; grid-row: 1; align-self: center; height: var(--banda); background: var(--fondo-3); transform-origin: 0 50%; transition: background-color 200ms ease; }
.palinsesto li.in-onda::before { background: var(--tinta); }
.pal-cosa { grid-column: 2; font-size: clamp(2rem, 4.6vw, 4.75rem); font-weight: 850; font-stretch: 80%; line-height: 1; letter-spacing: -0.02em; color: var(--spento); transition: color 200ms ease; }
.pal-come { grid-column: 2; margin-top: 6px; font-size: var(--s-lead); line-height: 1.3; color: var(--tenue); }
.palinsesto li.in-onda .pal-cosa { color: var(--inchiostro); }
.palinsesto li.in-onda .pal-come { color: var(--inchiostro); }
html:not(.js) .pal-cosa { color: var(--inchiostro); }
.riempi-term { grid-area: term; }
.terminale { background: var(--targa); border-top: var(--banda) solid var(--tinta); }
.terminale pre { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 4cqmin, 36px); overflow: hidden; }
.terminale code { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.15em; font-family: var(--mono); font-size: clamp(15px, 3.9cqmin, 28px); line-height: 1.5; color: var(--inchiostro); white-space: pre-wrap; overflow-wrap: anywhere; }
.terminale code > :first-child { margin-top: auto; }
.t-riga i { font-style: normal; color: var(--fosforo); }
.t-nota { color: var(--tenue); margin-bottom: 0.7em; }
.cursore { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--fosforo); animation: lampeggia 1s steps(1) infinite; }
@keyframes lampeggia { 50% { opacity: 0; } }
.terminale::after, .mappa::after, .chat::after { content: ""; position: absolute; inset: 0; background-image: var(--righe); background-size: 8px 3px; opacity: 0.35; pointer-events: none; }

/* ---------- CH 3 · Le regole: il GDPR letto nel codice, l'ISO in avvio ---------- */
.ch3 { --tinta: var(--petrolio); }
.ch3 .dentro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px);
  grid-template-areas: "testa mappa" "regole mappa"; }
.ch3 .testa { grid-area: testa; }
.regole { grid-area: regole; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(22px, 4vh, 44px); padding-top: clamp(24px, 4vh, 44px); }
.regola.regola-iso h3 { font-size: var(--s-head); font-weight: 850; font-stretch: 100%; line-height: 0.92; letter-spacing: -0.035em; }
.regola-iso .spia { width: 0.7em; height: 0.7em; }
.regola h3 { font-size: var(--s-sub); font-weight: 800; font-stretch: 92%; line-height: 1.08; letter-spacing: -0.015em; }
.regola p { margin-top: 12px; font-size: clamp(1.1875rem, 0.9rem + 0.9vw, 1.875rem); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; max-width: 24em; text-wrap: pretty; }
.spia { display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.45em; background: var(--tinta); vertical-align: 0.02em; animation: spia 2.4s steps(1) infinite; }
@keyframes spia { 70% { opacity: 0.25; } }
.riempi-mappa { grid-area: mappa; }
.mappa { background: var(--targa); border-top: var(--banda) solid var(--tinta); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center;
  gap: 5cqmin; padding: clamp(16px, 5cqmin, 44px); }
.m-codice { min-width: 0; overflow: hidden; }
.m-codice code { display: flex; flex-direction: column; font-family: var(--mono); font-size: clamp(15px, 3.2cqmin, 24px); line-height: 1.75; color: var(--tenue); white-space: pre; }
.m-campo b { font-weight: 500; color: var(--inchiostro); padding: 0.05em 0.2em; margin: 0 -0.2em; transition: background-color 220ms ease, color 220ms ease; }
.m-campo.personale b { background: var(--tinta); color: #fff; }
.m-trovati { display: flex; flex-direction: column; gap: 0.8em; font-size: clamp(15px, 3.4cqmin, 22px); line-height: 1.3; }
.m-trovati li { position: relative; padding-left: 1.1em; }
.m-trovati li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 0.6em; height: 0.6em; background: var(--tinta); }
.m-trovati code { display: block; font-family: var(--mono); font-weight: 500; color: var(--inchiostro); }
.m-trovati span { color: var(--tenue); }
.mappa.vivo .m-campo.personale b { background: transparent; }
.mappa.vivo .m-campo.personale.segnato b { background: var(--tinta); }
.mappa.vivo .m-trovati li { opacity: 0; transform: translateX(-8px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.mappa.vivo .m-trovati li.visto { opacity: 1; transform: none; }
.mappa.vivo.svanisce .m-trovati li, .mappa.vivo.svanisce .m-campo b { opacity: 0.35; transition-duration: 400ms; }
@container (max-width: 560px) { .mappa { grid-template-columns: minmax(0, 1fr); align-content: center; } .m-trovati { flex-direction: row; flex-wrap: wrap; gap: 0.5em 1.2em; } .m-trovati span { display: none; } }
@container (max-height: 300px) { .m-trovati { display: none; } }

/* ---------- CH 4 · Ricerca e bandi: le due sigle a retino, la banda ocra ---------- */
.ch4 { --tinta: var(--ocra); }
.riempi-sigle { margin-top: clamp(16px, 3vh, 36px); }
/* come i caratteri a doppia altezza del Televideo: le sigle si allungano in verticale fino a riempire (--sy da home.js) */
.sigle { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 4cqw;
  font-size: min(21cqw, 88cqh); font-weight: 900; font-stretch: 100%; line-height: 0.74; letter-spacing: -0.04em; transform: scaleY(var(--sy, 1)); transform-origin: 50% 100%; }
.sigla { color: var(--inchiostro); background-image: var(--retino); background-size: 7px calc(7px / var(--sy, 1)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* taste-skill-ignore: niente sfumatura, è il retino della foto del canale 1 stampato nelle lettere */
.js .sigla { animation: deriva 9s linear infinite; animation-play-state: paused; }
.ch4.in-onda .sigla { animation-play-state: running; }
.s-pan { animation-direction: reverse !important; }
@keyframes deriva { to { background-position: 63px 21px; } }
@container (orientation: portrait) { .sigle { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.06em; font-size: min(36cqw, 44cqh); } }
.banda-ch4 { margin: clamp(10px, 2vh, 20px) calc(-1 * var(--m)) 0; height: calc(var(--banda) + 2px); }

/* ---------- CH 5 · docentestressato.it: il nome che trema, e si calma se lo tocchi ---------- */
.ch5 { --tinta: var(--verde); }
.ch5 .dentro { justify-content: space-between; }
.ds-nome { font-weight: 900; font-stretch: 100%; line-height: 0.86; letter-spacing: -0.045em; font-size: clamp(3rem, 10vw, 11rem); padding-bottom: 0.04em; cursor: default; -webkit-tap-highlight-color: transparent; }
.ds-nome > span { display: block; white-space: nowrap; }
.stress i { display: inline-block; font-style: normal; }
.js .stress i { animation: trema 0.26s steps(2) infinite; animation-delay: calc(var(--k) * -61ms); animation-play-state: paused; }
.ch5.in-onda .stress i { animation-play-state: running; }
.stress > span { display: inline-block; }
@keyframes trema {
  0% { transform: translate(0.012em, -0.01em) rotate(-2deg); }
  50% { transform: translate(-0.014em, 0.012em) rotate(2.5deg); }
}
.ds-nome.calmo .stress i { animation: none; transition: transform 500ms var(--ease-out); transform: none; }
@media (hover: hover) and (pointer: fine) { .ds-nome:hover .stress i { animation: none; } }
.ds-lead { font-size: var(--s-sub); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; max-width: none; }
.arrivo { color: var(--fosforo); }
.banda-ch5 { width: min(100%, 22rem); margin-top: clamp(16px, 2.6vh, 28px); }
.funzioni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.funzioni li { padding-top: 14px; border-top: var(--banda) solid var(--fondo-3); font-size: var(--s-sub); font-weight: 700; font-stretch: 92%; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }

/* ---------- CH 6 · Hobby: la casa che scrive su Telegram ---------- */
.ch6 { --tinta: var(--blu); }
.riempi-chat { margin-top: clamp(18px, 3vh, 32px); }
.chat { background: var(--targa); display: flex; flex-direction: column; }
.c-testa { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 12px 18px; background: var(--fondo-2); border-top: var(--banda) solid var(--tinta); font-size: var(--s-body); }
.c-testa span { color: var(--tenue); font-size: var(--s-small); }
.c-messaggi { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; overflow: hidden; }
.c-messaggi > :first-child { margin-top: auto; }
.c-messaggi li { flex: none; display: flex; align-items: flex-end; gap: 12px; max-width: min(34em, 88%); padding: 10px 14px; background: var(--fondo-3); font-size: var(--s-body); line-height: 1.35; }
.c-messaggi li.c-bot { align-self: flex-start; }
.c-messaggi li.c-io { align-self: flex-end; background: #233042; }
.c-messaggi li.c-giorno { align-self: center; padding: 3px 12px; background: var(--fondo-2); color: var(--tenue); font-size: var(--s-small); }
.c-messaggi time { flex: none; font-size: var(--s-small); color: var(--tenue); font-variant-numeric: tabular-nums; }
.c-messaggi li.scrive { color: var(--tenue); font-style: italic; }
.c-messaggi li.entra { animation: entra 220ms var(--ease-out) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.chat { --nido: 44px; }
.c-testa { padding-right: calc(var(--nido) + 24px) !important; }
.nido-chat { top: calc(var(--banda) + 2px); right: 12px; width: var(--nido); height: var(--nido); }
.altri-titolo { font-size: var(--s-lead); font-weight: 800; color: var(--tenue); margin-bottom: 10px; }
.altri { display: flex; flex-direction: column; gap: clamp(22px, 4vh, 44px); }
.altri h3 { font-size: var(--s-sub); font-weight: 800; font-stretch: 92%; line-height: 1.08; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.altri p { margin-top: 8px; font-size: var(--s-lead); line-height: 1.38; max-width: 26em; }
.altri li { padding-top: 14px; border-top: var(--banda) solid var(--fondo-3); }

/* ---------- CH 7 · Fuori orario: notte; il bollettino è un televisore con la neve (prova A) ---------- */
.ch7 { --tinta: var(--rosso); }
.bollettino { position: relative; flex: 1 1 auto; min-height: 0; container-type: size; display: flex; flex-direction: column; justify-content: flex-end; gap: 2cqh;
  margin-top: 24px; padding: clamp(16px, 4cqmin, 36px); overflow: hidden; border-radius: 12px; background: var(--targa); isolation: isolate; }
.bollettino::after { content: ""; position: absolute; inset: 0; background-image: var(--righe); background-size: 8px 3px; opacity: 0.5; pointer-events: none; z-index: 1; }
.neve { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.22; image-rendering: pixelated; pointer-events: none; }
.boll-domanda { font-size: clamp(1.25rem, 7cqmin, 2.75rem); font-weight: 800; line-height: 1.1; }
.boll-domanda a { background: var(--targa); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.12em; }
.boll-risposta { align-self: flex-start; font-size: clamp(3.5rem, min(42cqh, 30cqw), 13rem); font-weight: 900; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.04em;
  padding: 0.1em 0.12em 0.02em; color: var(--inchiostro); }
.r-no { background: var(--verde); } .r-si { background: var(--rosso); } .r-boh { background: var(--ocra); color: var(--targa); }
.nido-boll { left: auto; right: clamp(12px, 4cqmin, 32px); top: auto; bottom: clamp(12px, 4cqmin, 32px); width: clamp(64px, 22cqmin, 130px); height: clamp(64px, 22cqmin, 130px); }
.boll-azioni { display: flex; gap: 10px; margin-top: 16px; }
.amici { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.amici h3 { font-size: var(--s-lead); font-weight: 800; margin-bottom: 10px; color: var(--tenue); }
.amici ul { display: flex; flex-wrap: wrap; gap: 6px; }
.amici li { padding: 6px 11px; background: var(--fondo-2); font-size: var(--s-body); font-weight: 700; line-height: 1.3; }
.prima { margin-top: 12px; font-size: var(--s-small); color: var(--tenue); }

/* ---------- CH 8 · Scrivimi: l'indirizzo da margine a margine, le cinque bande, i crediti ---------- */
.ch8 .dentro { justify-content: space-between; }
.email { position: relative; display: block; font-weight: 900; font-stretch: 75%; line-height: 0.86; letter-spacing: -0.045em; font-size: clamp(2.5rem, 9.4vw, 9rem); text-decoration: none; transition: color 160ms ease; }
.email .riga { position: relative; display: block; white-space: nowrap; isolation: isolate; width: max-content; }
.dominio span { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; text-decoration-color: var(--spento); }
@media (hover: hover) and (pointer: fine) { .email:hover { color: var(--fosforo); } }
.strisce { flex: none; width: calc(100% + 2 * var(--m)); display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--banda) + 2px); margin: 0 calc(-1 * var(--m)) clamp(12px, 2vh, 22px); }
.strisce i:nth-child(1) { background: var(--rosso); } .strisce i:nth-child(2) { background: var(--verde); } .strisce i:nth-child(3) { background: var(--ocra); }
.strisce i:nth-child(4) { background: var(--petrolio); } .strisce i:nth-child(5) { background: var(--blu); }
.piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: var(--s-small); line-height: 1.45; color: var(--tenue); }
.piede a { color: var(--inchiostro); }
.crediti { max-width: 52em; }

/* ---------- solo in locale: l'interruttore dei dati di prova ---------- */
.prova-dati { position: fixed; z-index: 95; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 2px; margin: 0; padding: 3px; background: #ddd; border-radius: 99px; font: 600 13px/1 system-ui, sans-serif; }
.prova-dati a { padding: 7px 12px; border-radius: 99px; color: #222; text-decoration: none; }
.prova-dati a[aria-current] { background: #fff; }

/* =================== desktop e tablet: i canali divisi stanno in uno schermo solo =================== */
@media (min-width: 700px) {
  .canale.diviso { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .canale.diviso > .pagina { grid-row: 1; }
  .canale.diviso > .pagina:first-of-type .dentro { padding-right: calc(var(--g) / 2); }
  .canale.diviso > .pagina:last-of-type .dentro { padding-left: var(--g); justify-content: flex-end; }
}
/* desktop: la testa a sinistra, il lato (Per gioco, gli altri canali) accanto a lei in alto, e il quadro
   (chat, bollettino) sotto, largo tutto lo schermo; --lato (home.js) è l'altezza del lato, così il quadro non ci finisce sotto */
@media (min-width: 1100px) {
  .canale.diviso > .pagina:first-of-type { grid-column: 1 / -1; grid-row: 1; }
  .canale.diviso > .pagina:last-of-type { grid-column: 2; grid-row: 1; align-self: start; z-index: 2; }
  .canale.diviso > .pagina:first-of-type .dentro { padding-right: var(--m); }
  .canale.diviso > .pagina:last-of-type .dentro { padding: var(--cima) var(--m) 0 var(--g); justify-content: flex-start; }
  .canale.diviso .testa { width: calc(7 / 12 * 100vw - var(--m) - var(--g)); min-height: var(--lato, auto); }
  .canale.diviso .amici { justify-content: flex-start; }
  .t-tasti { display: flex; }
  .c-messaggi li { font-size: 1.25rem; padding: 12px 16px; }
  .c-testa { font-size: var(--s-lead); padding: 14px 20px; }
}
@media (max-width: 1099px) { .t-tasti { display: none; } }

/* ---------- tablet: più alto che largo ---------- */
@media (min-width: 700px) and (max-width: 1099px) {
  .ch1 .dentro { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; grid-template-areas: "quadro" "banda" "nome" "testo"; }
  .ch1-testo { align-self: start; margin: 18px 0 0; }
  .guida ul { display: none; }
  .ch2 .dentro, .ch3 .dentro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "testa" "pal" "term"; row-gap: 0; }
  .ch3 .dentro { grid-template-areas: "testa" "regole" "mappa"; }
  .palinsesto, .regole { padding: 28px 0 28px; }
  .canale.diviso { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .canale.diviso > .pagina:last-of-type { grid-row: 2; }
  .canale.diviso > .pagina:first-of-type .dentro { padding-bottom: 0; padding-right: var(--m); }
  .canale.diviso > .pagina:last-of-type .dentro { padding-top: 32px; padding-left: var(--m); }
  .altri { flex-direction: row; } .altri li { flex: 1 1 0; }
  .funzioni { grid-template-columns: minmax(0, 1fr); }
}

/* =================== telefono =================== */
@media (max-width: 699px) {
  :root { --cima: 60px; --piede: 22px; --banda: 5px; --s-head: clamp(2.25rem, 11vw, 3rem); --s-sub: clamp(1.375rem, 6.4vw, 1.75rem); --s-lead: clamp(1.125rem, 4.8vw, 1.3125rem); --s-body: 1.0625rem; }
  .osd { padding: 6px 9px 5px; font-size: 1.0625rem; }
  .apparecchio { padding-top: max(12px, env(safe-area-inset-top)); }
  .telecomando { display: none !important; }
  .osd-pag { margin-left: auto; }
  .canale.diviso { scroll-snap-align: none; scroll-snap-stop: normal; height: auto; }
  .canale.diviso > .pagina { height: var(--schermo); scroll-snap-align: start; scroll-snap-stop: always; overflow: clip; }

  .ch1 .dentro { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto auto; grid-template-areas: "quadro" "banda" "nome" "testo"; }
  .ch1-quadro { margin-bottom: 14px; }
  .banda-ch1 { margin-bottom: 12px; }
  .ch1-testo { gap: 14px; align-self: start; margin: 14px 0 0; }
  .ruolo { font-size: var(--s-lead); }
  .azioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .azioni .tasto { min-height: 48px; padding: 10px 14px; }
  .guida { display: none; }
  .nome { font-stretch: 85%; letter-spacing: -0.035em; line-height: 0.82; }
  .sottopancia { left: 10px; top: 10px; max-width: calc(100% - 20px); }
  .frase { font-size: 1rem; padding: 8px 10px; }
  .altra { padding: 0 10px; }
  .nido-tubo { width: 72px; height: 72px; right: 10px; bottom: 10px; }

  .ch2 .dentro, .ch3 .dentro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "testa" "pal" "term"; }
  .ch3 .dentro { grid-template-areas: "testa" "regole" "mappa"; }
  .palinsesto { gap: 14px; padding: 22px 0 20px; }
  .palinsesto li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
  .pal-cosa { font-size: 1.75rem; }
  .pal-come { margin-top: 2px; font-size: var(--s-body); }
  .regole { gap: 18px; padding: 18px 0 20px; }
  .regola p { margin-top: 6px; font-size: var(--s-body); }

  .sigle { font-size: min(36cqw, 44cqh); }
  .ds-nome { font-size: 19vw; }
  .funzioni { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .funzioni li { padding-top: 10px; font-size: clamp(1.375rem, 7.6vw, 2rem); }

  .riempi-chat { margin-top: 18px; }
  .c-testa { padding: 10px 14px; }
  .c-messaggi { padding: 12px 12px 14px; gap: 8px; }
  .c-messaggi li { max-width: 92%; padding: 8px 12px; gap: 10px; }
  .altri { gap: 20px; }

  .amici { justify-content: flex-start; }
  .amici li { padding: 5px 9px; }
  .prima { margin-top: 8px; }

  .piede { flex-direction: column; gap: 6px; }
  .scorri { display: block; }
  .stack { font-size: var(--s-body); }
  /* con i germi la striscia in alto è piena: via l'ora, il nome del canale resta leggibile */
  .con-germi .osd-pag { display: none; }
  .osd-ch span { font-stretch: 82%; margin-left: 0.25em; }
}
/* su telefono Hobby e Fuori orario stanno in una pagina sola: il lato (Per gioco, gli altri canali) va sotto il quadro */
@media (max-width: 699px) {
  .canale.diviso { height: var(--schermo); scroll-snap-align: start; scroll-snap-stop: always; }
  .canale.diviso > .pagina { height: auto; scroll-snap-align: none; scroll-snap-stop: normal; }
  .canale.diviso > .pagina:first-of-type { flex: 1 1 auto; min-height: 0; }
  .canale.diviso > .pagina:first-of-type .dentro { padding-bottom: 0; }
  .canale.diviso > .pagina:last-of-type .dentro { padding-top: 20px; }
  .ch7 .amici h3 { margin-bottom: 8px; }
  .ch6 .altri { gap: 14px; }
  .ch6 .altri h3 { font-size: 1.25rem; }
  .ch8 .lead { font-size: clamp(1.5rem, 8.2vw, 2rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; }
  .ch8 h2 { font-size: clamp(3rem, 16vw, 4.25rem); }
  .ch6 .altri p { font-size: 1rem; margin-top: 2px; }
  .ch6 .altri li { padding-top: 10px; }
}
/* telefono basso: la frase scende sotto il tubo (non lo copre più), «Un'altra» diventa ↻ */
@media (max-width: 699px) and (max-height: 739px) {
  .ch1-quadro { margin-bottom: 10px; }
  .sottopancia { position: static; max-width: none; margin-top: 6px; }
  .frase { flex: 1 1 auto; font-size: var(--s-small); padding: 6px 10px; }
  .altra { width: 44px; padding: 0; }
  .altra-testo { display: none; }
  .altra-icona { display: inline; }
  .banda-ch1 { margin-bottom: 8px; }
  .ch1-testo { gap: 10px; margin-top: 10px; }
  .stack { margin-top: 4px; font-size: var(--s-small); }
  .ch1-testo { gap: 8px; position: relative; }
  .azioni .tasto { min-height: 44px; padding: 7px 12px; font-size: 1rem; }
  .azioni .tasto-secondo { justify-self: start; }
  /* l'indizio sta sulla riga del secondo tasto, a destra: il tubo ha bisogno di quei 30px */
  .scorri { position: absolute; right: 0; bottom: 0; line-height: 44px; }
}
@media (max-width: 699px) and (max-height: 640px) {
  .boll-azioni { display: none; } /* la domanda del bollettino porta già a /malato/ */
  .ruolo { font-size: 1.125rem; }
  .palinsesto { gap: 10px; padding: 16px 0 14px; }
  .pal-cosa { font-size: 1.5rem; }
  .regole { gap: 14px; padding: 14px 0; }
  .ch3 .regola p { font-size: 1rem; }
}
/* schermi in piedi: il nome del prodotto si stringe, l'indirizzo va a doppia altezza come sul Televideo */
@media (max-aspect-ratio: 4/5) {
  .ds-nome { font-stretch: 70%; }
  .email { transform: scaleY(2); }
  .dominio span { text-decoration-thickness: 0.035em; }
}
@media (max-width: 379px) { .osd-pag span { display: none; } }
@media (max-width: 359px) {
  .con-germi .osd-ch span { display: none; }
  .osd { font-size: 0.9375rem; padding: 5px 7px 4px; }
  .osd-pag span { display: none; }
}
/* desktop basso (1280×720): la guida dei canali lascia il posto, il telecomando in alto basta */
@media (min-width: 1100px) and (max-height: 780px) {
  .guida ul { display: none; }
  .ds-nome { font-size: clamp(3rem, 8.4vw, 11rem); }
}

/* schermi molto bassi (telefono in orizzontale, zoom forte): il canale cresce invece di tagliare */
@media (max-height: 459px) {
  html { scroll-snap-type: y proximity; }
  .canale, .canale.diviso > .pagina { height: auto; min-height: var(--schermo); }
  .riempi { flex: 0 0 220px; }
  .tubo { flex: 0 0 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .dentro { will-change: auto; }
  .stress i, .sigla, .spia, .cursore { animation: none !important; }
  .c-messaggi li.entra { animation: none; }
}
@media print {
  html { scroll-snap-type: none; }
  .apparecchio, .statico, .neve, .crt { display: none !important; }
  .canale, .pagina { min-height: 0; break-inside: avoid; }
}

/* ---------- i germi: il tasto per mandarli via sta nella striscia in alto, mai sopra un quadro o un testo ---------- */
@media (max-width: 699px) {
  .via-germi { height: 36px; margin-left: auto; padding: 0 10px; font-size: 0.9375rem; }
  .via-germi + .osd-pag { margin-left: 6px; }
  .con-germi .via-germi { margin-left: auto; }
}