/* =====================================================================
   BOTANICO TV — STILE
   Televideo + televisore CRT. Palette RGB pura, font teletext.
   Per cambiare i font basta modificare le variabili --font-* qui sotto.
   ===================================================================== */

/* ---------- Font ---------- */
/* Bedstead: ricostruzione del chip teletext SAA5050 (pubblico dominio) */
@font-face {
  font-family: "Bedstead";
  src: url("../fonts/bedstead.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bedstead";
  src: url("../fonts/bedstead-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* versione stretta: usata a grandezza doppia = "doppia altezza" del Televideo */
@font-face {
  font-family: "Bedstead Doppia";
  src: url("../fonts/bedstead-ultracondensed.woff2") format("woff2");
  font-display: swap;
}
/* VT323: carattere da terminale per le frasi (licenza OFL) */
@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323.woff2") format("woff2");
  font-display: swap;
}
/* marchio Tele Botanico: Leckerli One richiama il corsivo del logo,
   Jost il bastoni della scritta sotto (entrambi licenza OFL) */
@font-face {
  font-family: "Leckerli One";
  src: url("../fonts/leckerli-one.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Palette e misure ---------- */
:root {
  --nero: #000000;
  --bianco: #FFFFFF;
  --blu: #0000AA;
  --rosso: #FF0000;
  --verde: #00FF00;
  --giallo: #FFFF00;
  --ciano: #00FFFF;
  --magenta: #FF00FF;
  --plastica: #1A1A1A;

  --font-teletext: "Bedstead", ui-monospace, "Courier New", monospace;
  --font-doppia: "Bedstead Doppia", "Bedstead", ui-monospace, monospace;
  --font-testo: "VT323", ui-monospace, "Courier New", monospace;
  --font-marchio: "Leckerli One", "Brush Script MT", cursive;
  --font-payoff: "Jost", "Futura", "Century Gothic", sans-serif;
  --verde-botanico: #004730;

  /* unità base: la dimensione di un carattere Televideo */
  --u: clamp(13px, 4.1vw, 17px);
  --margine: 16px;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
  background: var(--nero);
  color: var(--bianco);
}

body {
  font-family: var(--font-teletext);
  font-size: var(--u);
  line-height: 1.3;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid var(--ciano);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lettere a mosaico (come i titoli del Televideo), disegnate da js/app.js */
.mosaico svg {
  display: block;
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
}

/* Barre colore EBU al 75% */
.barre,
.monoscopio {
  background: linear-gradient(90deg,
    #C0C0C0 0 12.5%, #C0C000 0 25%, #00C0C0 0 37.5%, #00C000 0 50%,
    #C000C0 0 62.5%, #C00000 0 75%, #0000C0 0 87.5%, #000000 0 100%);
}

.led {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--rosso);
  box-shadow: 0 0 6px var(--rosso);
}


/* =====================================================================
   1. TV SPENTA: insegna al neon, vetro spento, tasto POWER
   ===================================================================== */

/* marchio "Tele Botanico": "Tele" scritto a mano sopra il logo */
.marchio {
  position: relative;
  width: 100%;
  padding-top: 0.9em;
  font-size: clamp(30px, 11vw, 46px);
}

.marchio-tele {
  position: absolute;
  left: 1%;
  top: -0.12em;
  font-family: var(--font-marchio);
  font-size: 1em;
  line-height: 1;
  color: var(--bianco);
  transform: rotate(-6deg);
  transform-origin: left bottom;
}

.marchio-logo {
  display: block;
  width: 100%;
  height: auto;
}

/* se il logo non si carica: la parola scritta nello stesso corsivo */
.marchio-testo {
  display: block;
  font-family: var(--font-marchio);
  font-size: 1.9em;
  line-height: 1.1;
  color: var(--bianco);
}

.marchio-payoff {
  margin: 2px 0 0;
  font-family: var(--font-payoff);
  font-weight: 500;
  font-size: clamp(11px, 3.4vw, 15px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--bianco);
}

/* ---------- insegna al neon: al posto della scheda finché la TV è spenta ---------- */
.insegna {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--altezza-scheda, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px var(--margine) 8px;
  text-align: center;
  transition: opacity 0.25s, visibility 0s;
}

.menu.spenta #scheda { visibility: hidden; }

.menu:not(.spenta) .insegna {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

.marchio--neon {
  width: min(74%, 320px);
  font-size: clamp(28px, 9.5vw, 40px);
}

/* "Tele" in neon rosa-rosso */
.marchio--neon .marchio-tele {
  color: #FFE6EE;
  text-shadow: 0 0 2px #FFFFFF, 0 0 6px #FF4F86, 0 0 14px #FF2E63, 0 0 30px #FF2E63, 0 0 52px rgba(255, 46, 99, 0.55);
  animation: neon-accende 1.5s steps(1, end) 0.5s both, neon-ronzio 7s steps(1, end) 3s infinite;
}

/* "Botanico" in neon bianco con alone verde */
.marchio--neon .marchio-logo {
  filter: drop-shadow(0 0 1px #FFFFFF) drop-shadow(0 0 5px #A8FFE4) drop-shadow(0 0 12px #2EFFB0) drop-shadow(0 0 26px rgba(46, 255, 176, 0.5));
  animation: neon-accende 1.5s steps(1, end) both, neon-ronzio 9s steps(1, end) 4s infinite;
}

.insegna .marchio-payoff {
  color: #E8FFF6;
  text-shadow: 0 0 6px rgba(46, 255, 176, 0.6);
  animation: neon-accende 1.5s steps(1, end) 0.2s both;
}

.insegna-invito {
  margin: 8px 0 0;
  font-size: calc(var(--u) * 0.9);
  color: var(--bianco);
}

.freccia-giu {
  color: var(--rosso);
  animation: lampeggio 1.2s steps(1, end) infinite;
}

/* crediti sotto l'insegna */
.standby-crediti {
  margin: 6px 0 0;
  font-family: var(--font-payoff);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #8C8C8C;
}

.standby-crediti span { white-space: nowrap; }

.standby-crediti a {
  color: #D8D8D8;
  text-decoration: none;
  border-bottom: 1px solid #555555;
}

/* ---------- tasto POWER: plastica rossa lucida in una ghiera di metallo ---------- */
.power {
  --d: 118px;
  position: relative;
  width: var(--d);
  height: var(--d);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0) 72%),
    conic-gradient(from 210deg, #2E2E33, #A2A2AA 12%, #3E3E44 26%, #1C1C1F 48%, #82828A 66%, #35353B 82%, #2E2E33);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -2px 3px rgba(0, 0, 0, 0.6),
    0 0 0 2px #050506,
    0 calc(var(--d) * 0.1) calc(var(--d) * 0.2) rgba(0, 0, 0, 0.85);
}

/* il foro in cui affonda il tasto */
.power::before {
  content: "";
  position: absolute;
  inset: 9.3%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 62%, #1C0000, #050505 70%);
  box-shadow: inset 0 calc(var(--d) * 0.035) calc(var(--d) * 0.07) rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* il tasto vero e proprio, bombato, con il suo spessore */
.power-tasto {
  position: absolute;
  inset: 12.7%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 50% 38%, #FF5448 0%, #E20800 48%, #A60000 82%, #780000 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.45),
    inset 0 -5px 8px rgba(60, 0, 0, 0.55),
    0 calc(var(--d) * 0.06) 0 #5A0000,
    0 calc(var(--d) * 0.076) 3px rgba(0, 0, 0, 0.8),
    0 calc(var(--d) * 0.1) calc(var(--d) * 0.12) rgba(0, 0, 0, 0.5);
  transform: translateY(calc(var(--d) * -0.042));
  transition: transform 0.07s ease-out, box-shadow 0.07s ease-out, filter 0.07s;
}

.power svg {
  width: 44%;
  height: 44%;
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgba(90, 0, 0, 0.8));
}

.power:active .power-tasto,
.power.premuto .power-tasto {
  transform: translateY(calc(var(--d) * 0.017));
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.3),
    inset 0 -3px 6px rgba(60, 0, 0, 0.55),
    inset 0 3px 8px rgba(0, 0, 0, 0.35),
    0 0 0 #5A0000,
    0 1px 2px rgba(0, 0, 0, 0.8);
  filter: brightness(0.9);
}

/* ---------- TV spenta: vetro scuro, marchio "stampato" nel tubo, riflesso dell'insegna ---------- */
.spento {
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, #1C2320 0%, #0B0F0D 55%, #040605 100%);
  transition: opacity 0.35s;
}

.spento::before,
.spento::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75%;
  pointer-events: none;
}

/* luce rosa di "Tele" e verde di "Botanico" che salgono dall'insegna */
.spento::before {
  background: radial-gradient(ellipse 50% 55% at 36% 100%, rgba(255, 46, 99, 0.22), transparent 72%);
  animation: neon-accende 1.5s steps(1, end) 0.5s both;
}

.spento::after {
  background: radial-gradient(ellipse 60% 55% at 60% 100%, rgba(46, 255, 176, 0.15), transparent 72%);
  animation: neon-accende 1.5s steps(1, end) both;
}

/* burn-in: l'ombra del marchio rimasta impressa nei fosfori */
.spento-fantasma {
  position: relative;
  width: 58%;
  padding-top: 0.9em;
  font-size: calc(var(--sw) * 0.12);
  opacity: 0.075;
  filter: blur(0.6px);
}

.menu:not(.spenta) .spento { opacity: 0; }

/* spia: rossa in standby, verde accesa; display spento */
.menu:not(.spenta) .pannello .led {
  background: #2BFF6E;
  box-shadow: 0 0 6px 1px rgba(43, 255, 110, 0.8);
}

.menu.spenta .display-cifre { opacity: 0; }

/* =====================================================================
   2. MENU
   ===================================================================== */
.menu {
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

/* ---------- Riga di testata Televideo ---------- */
.testata {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding: 6px var(--margine) 2px;
  white-space: nowrap;
  /* sempre su una riga: circa 39 caratteri nella larghezza disponibile */
  font-size: min(calc(var(--u) * 0.9), calc((min(100vw, 520px) - 2 * var(--margine)) / 24));
}

.testata-pagina { color: var(--bianco); }
.testata-nome { color: var(--giallo); font-weight: 700; flex: 1; }
.testata-data { color: var(--bianco); }
.testata-ora { color: var(--giallo); font-variant-numeric: tabular-nums; }

@media (max-width: 359px) {
  .testata-data { display: none; }
}

/* ---------- Palco: TV + scheda (e la Guida sopra) ---------- */
.palco {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}


/* =====================================================================
   LA TV
   ===================================================================== */
.tv {
  /* misure del televisore, calcolate sulla larghezza del telefono */
  --larghezza: min(100vw, 520px);
  --margine-tv: 5px;
  --b: clamp(12px, calc(var(--larghezza) * 0.04), 20px);   /* spessore del mobile */
  --c: clamp(5px, calc(var(--larghezza) * 0.016), 9px);    /* cornice nera del tubo */
  --pannello: 40px;
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  /* altezza naturale della TV quando è la larghezza a comandare */
  max-height: min(72%, calc((var(--larghezza) - 2 * var(--margine-tv) - 2 * var(--b) - 2 * var(--c)) * 0.75 + var(--b) + 2 * var(--c) + var(--pannello) + 16px));
  container-type: size;
  display: grid;
  place-items: center;
  touch-action: pan-y;
  cursor: pointer;
}

/* la luce dello schermo che illumina la stanza */
.tv::before {
  content: "";
  position: absolute;
  inset: 6% 3% 16%;
  background: radial-gradient(closest-side, var(--bagliore, #0000AA), transparent);
  opacity: 0.2;
  filter: blur(26px);
  pointer-events: none;
}

/* il mobile del televisore, in plastica scura: lo schermo resta sempre 4:3 */
.mobile {
  --fondo: var(--pannello);
  --sw: min(
    calc(100cqw - 2 * var(--margine-tv) - 2 * var(--b) - 2 * var(--c)),
    calc((100cqh - 14px - var(--b) - 2 * var(--c) - var(--fondo)) * 4 / 3)
  );
  position: relative;
  width: calc(var(--sw) + 2 * var(--b) + 2 * var(--c));
  padding: var(--b) var(--b) 0;
  border-radius: calc(var(--b) * 1.8);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 20%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0.3) 100%),
    #27272B;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 0 rgba(0, 0, 0, 0.6),
    inset 1px 0 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px #0A0A0B,
    0 22px 30px -10px rgba(0, 0, 0, 0.95);
}

/* grana della plastica */
.mobile::before,
.telecomando::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--grana, none);
  background-size: 128px 128px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* la cornice nera, incassata, intorno al tubo */
.cornice {
  position: relative;
  padding: var(--c);
  border-radius: 9% / 12%;
  background: linear-gradient(180deg, #060607 0%, #151518 100%);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 0 rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.1);
}

@container (max-height: 230px) {
  .mobile { --fondo: var(--b); padding-bottom: var(--b); }
  .pannello { display: none; }
}

.schermo {
  position: relative;
  width: var(--sw);
  height: calc(var(--sw) * 3 / 4);
  overflow: hidden;
  background: var(--nero);
  border-radius: 8% / 10.5%;
  isolation: isolate;
}

/* tubo catodico WebGL (js/crt.js) */
.crt {
  display: none;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.schermo.gl .crt { display: block; }

/* con il tubo WebGL attivo gli strati semplici servono solo come sorgenti */
.schermo.gl .ident,
.schermo.gl .fermo,
.schermo.gl .bug,
.schermo.gl .fuori-onda,
.schermo.gl .rumore,
.schermo.gl .osd,
.schermo.gl .righe-crt,
.schermo.gl .accensione,
.schermo.gl .rete {
  visibility: hidden;
}

/* sigla di rete Tele Botanico, per lo schermo semplice (senza WebGL) */
.rete {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: radial-gradient(ellipse at 50% 45%, #0C6B48, #002418 80%);
}

.rete .marchio {
  width: 66%;
  font-size: calc(var(--sw) * 0.13);
}

.rete .marchio-payoff {
  font-size: calc(var(--sw) * 0.034);
}

.schermo > * {
  position: absolute;
  inset: 0;
}

/* segnale: logo del canale su fondo pieno */
.ident {
  display: grid;
  place-items: center;
  background: var(--sfondo-logo, var(--nero));
}

.ident-logo {
  position: relative;
  max-width: 64%;
  max-height: 60%;
  object-fit: contain;
  filter: drop-shadow(1.5px 0 0 rgba(255, 0, 0, 0.35)) drop-shadow(-1.5px 0 0 rgba(0, 255, 255, 0.35));
}

/* monoscopio: appare quando il logo manca */
.monoscopio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.monoscopio-cerchio {
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  border: calc(var(--sw) * 0.012) solid var(--bianco);
  border-radius: 50%;
}

.monoscopio-nome {
  position: relative;
  padding: 0.3em 0.8em;
  background: var(--nero);
  color: var(--bianco);
  font-weight: 700;
  font-size: calc(var(--sw) * 0.06);
  text-transform: uppercase;
}

.fermo,
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video {
  opacity: 0;
  transition: opacity 0.15s;
}

.video.visibile { opacity: 1; }

/* logo piccolo in basso a destra, come in TV negli anni '80-'90 */
.bug {
  inset: auto 8% 11% auto;
  z-index: 1;
  width: 20%;
  height: 13%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.92;
}

/* grigio con contorno nero, come Raiuno dal 1986 */
.bug.grigio {
  filter: grayscale(1) brightness(1.4)
    drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000)
    drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

.bug.bianco { filter: brightness(0) invert(1); }

/* cocktail esaurito */
.fuori-onda {
  inset: 41% 0 auto;
  height: 18%;
  display: grid;
  place-items: center;
  background: var(--rosso);
  color: var(--bianco);
  font-weight: 700;
  font-size: calc(var(--sw) * 0.08);
  z-index: 1;
}

.schermo.fuori .ident,
.schermo.fuori .video,
.schermo.fuori .fermo {
  filter: grayscale(1) brightness(0.55);
}

/* statico del cambio canale */
.rumore {
  inset: -6%;
  width: 112%;
  height: 112%;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.14s;
  z-index: 2;
  pointer-events: none;
}

.rumore.attivo {
  opacity: 0.84;
  transition: none;
  animation: sobbalzo 0.1s steps(1, end) infinite;
}

/* l'immagine sotto al rumore perde il sincronismo */
.schermo.sintonizza .ident,
.schermo.sintonizza .video,
.schermo.sintonizza .fermo {
  animation: strappo 0.2s steps(1, end) infinite;
}

/* numero canale verde (On Screen Display) */
.osd {
  inset: 6% 7% auto auto;
  z-index: 3;
  color: var(--verde);
  font-weight: 700;
  font-size: calc(var(--sw) * 0.13);
  line-height: 1;
  text-shadow: 0 0 6px rgba(0, 255, 0, 0.75), 2px 2px 0 var(--nero);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.osd.visibile {
  opacity: 1;
  transition: none;
}

/* scanline, grana e barra che scorre */
.righe-crt {
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.26) 0 1px, transparent 1px 3px);
}

.righe-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grana, none);
  background-size: 128px 128px;
  opacity: 0.09;
  mix-blend-mode: screen;
  animation: grana 0.4s steps(1, end) infinite;
}

.righe-crt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.045), transparent);
  animation: rullo 8s linear infinite;
}

/* vetro curvo: ombra ai bordi, riflesso della stanza e filo di luce */
.vetro {
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 62% 40% at 26% 13%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 70%),
    linear-gradient(166deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%);
  box-shadow:
    inset 0 0 calc(var(--sw) * 0.06) rgba(0, 0, 0, 0.8),
    inset 0 0 3px rgba(0, 0, 0, 0.95);
}

.vetro::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 2.5%;
  height: 45%;
  border-radius: 50% / 22%;
  border-top: 1.5px solid rgba(255, 255, 255, 0.14);
  filter: blur(0.6px);
}

/* accensione del tubo: la riga bianca che si apre */
.schermo .accensione {
  z-index: 6;
  background: #D8E8E4;
  transform: scale(0, 0);
  pointer-events: none;
}

.schermo .accensione.via {
  animation: accensione 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

/* spot iniziale (media/intro/intro.mp4) e videocassetta AV (media/spot/spot.mp4) */
.spot,
.cassetta {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--nero);
}

/* pannello sotto lo schermo: marchio, altoparlante, display, manopole, spia */
.pannello {
  position: relative;
  height: var(--pannello);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 calc(var(--c) + 2px);
}

.pannello-marca {
  -webkit-touch-callout: none; /* niente menu di iPhone tenendola premuta */
  color: #BDBDC4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.1);
}

.pannello-griglia {
  flex: 1;
  min-width: 16px;
  height: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #0A0A0C 0 3px, rgba(0, 0, 0, 0) 3px 6px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* display a LED con il numero del canale */
.pannello-display {
  position: relative;
  padding: 3px 5px 2px;
  border-radius: 3px;
  background: #140202;
  box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.08);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.display-spento { color: #3C0A08; }

.display-cifre {
  position: absolute;
  left: 5px;
  top: 3px;
  color: #FF3B2F;
  text-shadow: 0 0 6px rgba(255, 40, 30, 0.9);
}

.pannello-manopole {
  display: flex;
  gap: 7px;
}

.pannello-manopole i {
  position: relative;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7A7A82 0%, #3B3B41 45%, #1A1A1D 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.85), inset 0 -1px 1px rgba(0, 0, 0, 0.6);
}

.pannello-manopole i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: #0E0E10;
}

.pannello-manopole i:last-child::after { transform: rotate(40deg); transform-origin: 50% 6.5px; }

.pannello .led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF2020;
  box-shadow: 0 0 6px 1px rgba(255, 30, 30, 0.8);
}

/* tasto AV sul frontale: passa al videoregistratore */
.pannello-av {
  min-width: 34px;
  min-height: 24px;
  padding: 4px 7px 3px;
  border: 0;
  border-radius: 4px;
  font-family: var(--font-teletext);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #CFCFD4;
  background: linear-gradient(180deg, #3C3C42, #26262A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 0 #0B0B0C, 0 3px 3px rgba(0, 0, 0, 0.6);
  transition: transform 0.06s, box-shadow 0.06s;
}

.pannello-av:active,
.pannello-av.premuto {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 #0B0B0C, 0 1px 1px rgba(0, 0, 0, 0.6);
}

.menu.modo-av .pannello-av {
  color: #2BFF6E;
  text-shadow: 0 0 4px rgba(43, 255, 110, 0.8);
}

/* ingresso AV, schermo semplice (senza WebGL) */
.av {
  z-index: 2;
  display: grid;
  place-items: start end;
  padding: 9% 10%;
  background: #0024C8;
  color: var(--bianco);
  font-weight: 700;
  font-size: calc(var(--sw) * 0.07);
}

.schermo.gl .av { visibility: hidden; }


/* =====================================================================
   SCHEDA COCKTAIL
   ===================================================================== */
.scheda {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px var(--margine) 10px;
}

.scheda p { margin: 0; }

.scheda-canale {
  display: flex;
  align-items: stretch;
  align-self: flex-start;
  max-width: 100%;
  background: var(--c, var(--blu));
  color: var(--t, var(--bianco));
  font-weight: 700;
}

.scheda-num {
  padding: 1px 0.7ch;
  background: var(--nero);
  color: var(--c, var(--bianco));
  border: 2px solid var(--c, var(--blu));
}

.scheda-nome {
  padding: 3px 1ch 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheda-cocktail {
  margin: 4px 0 0;
  font-family: var(--font-doppia);
  font-weight: 400;
  font-size: calc(var(--u) * 2);
  line-height: 1.05;
  color: var(--giallo);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.scheda-ingredienti {
  color: var(--ciano);
  text-transform: uppercase;
}

.scheda-gusto { color: var(--verde); }

.scheda-descrizione {
  font-family: var(--font-testo);
  font-size: calc(var(--u) * 1.45);
  line-height: 1;
  color: var(--bianco);
}

.scheda-descrizione:empty { display: none; }

.scheda-piede {
  display: flex;
  align-items: flex-end;
  gap: 1ch;
  margin-top: 2px;
}

.tag {
  padding: 2px 0.8ch 1px;
  background: var(--verde);
  color: var(--nero);
  font-weight: 700;
}

.scheda-prezzo {
  margin-left: auto;
  font-family: var(--font-doppia);
  font-size: calc(var(--u) * 2);
  line-height: 1;
  color: var(--bianco);
  white-space: nowrap;
}

.scheda.fuori .scheda-prezzo {
  padding: 2px 0.6ch 0;
  background: var(--rosso);
}

.scheda.fuori .scheda-cocktail,
.scheda.fuori .scheda-ingredienti,
.scheda.fuori .scheda-gusto,
.scheda.fuori .scheda-descrizione {
  opacity: 0.55;
}

/* la pagina si ridisegna riga per riga, come il Televideo */
.scheda.ridisegna > * {
  animation: ridisegna 0.28s steps(5, end) both;
}
.scheda.ridisegna > :nth-child(2) { animation-delay: 0.04s; }
.scheda.ridisegna > :nth-child(3) { animation-delay: 0.08s; }
.scheda.ridisegna > :nth-child(4) { animation-delay: 0.12s; }
.scheda.ridisegna > :nth-child(5) { animation-delay: 0.16s; }
.scheda.ridisegna > :nth-child(6) { animation-delay: 0.2s; }


/* =====================================================================
   GUIDA TV (P.100)
   ===================================================================== */
.guida {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: var(--nero);
}

.guida.apri > * {
  animation: ridisegna 0.26s steps(5, end) both;
}
.guida.apri > :nth-child(2) { animation-delay: 0.05s; }
.guida.apri > :nth-child(3) { animation-delay: 0.1s; }
.guida.apri > :nth-child(4) { animation-delay: 0.15s; }
.guida.apri > :nth-child(5) { animation-delay: 0.2s; }

.guida-testata {
  flex: none;
  padding: 12px var(--margine) 8px;
  background: var(--blu);
}

.mosaico--guida {
  width: min(62%, 250px);
}

.guida-titolo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.guida-sotto {
  margin: 8px 0 0;
  color: var(--ciano);
}

.guida-lista {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px var(--margine);
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.riga {
  display: grid;
  grid-template-columns: 3.4ch 1fr auto;
  column-gap: 1ch;
  row-gap: 1px;
  align-items: baseline;
  width: 100%;
  min-height: 52px;
  padding: 7px 0.5ch;
  border: 0;
  background: none;
  text-align: left;
}

.riga[aria-current="true"] {
  background: var(--blu);
}

.riga-num {
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 0 1px;
  background: var(--c);
  color: var(--t);
  font-weight: 700;
  text-align: center;
}

.riga-cocktail {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  color: var(--giallo);
  font-weight: 700;
  text-transform: uppercase;
}

/* i nomi lunghi vanno a capo invece di essere tagliati */
.riga-cocktail b {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* puntini di guida tra nome e prezzo */
.riga-cocktail::after {
  content: "........................................................................";
  flex: 1;
  min-width: 1ch;
  overflow: hidden;
  white-space: nowrap;
  color: var(--blu);
  font-weight: 400;
}

.riga[aria-current="true"] .riga-cocktail::after { color: var(--bianco); }

.riga-prezzo {
  color: var(--bianco);
  white-space: nowrap;
}

.riga-canale {
  grid-column: 2 / span 2;
  color: var(--ciano);
  font-size: calc(var(--u) * 0.85);
  text-transform: uppercase;
}

.riga-tag {
  margin-left: 1ch;
  color: var(--verde);
}

.riga--scrivi .riga-num {
  background: var(--magenta);
  color: var(--bianco);
}

.riga--av .riga-num {
  background: #C0C0C0;
  color: var(--nero);
}

.riga.fuori .riga-cocktail,
.riga.fuori .riga-canale { opacity: 0.5; }
.riga.fuori .riga-prezzo { color: var(--rosso); }

.guida-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px var(--margine);
}

.guida-info h3 {
  margin: 0 0 12px;
  font-family: var(--font-doppia);
  font-weight: 400;
  font-size: calc(var(--u) * 2);
  line-height: 1;
  color: var(--giallo);
}

.guida-info p {
  margin: 0;
  min-height: 1.3em;
  color: var(--bianco);
}

/* tasto in fondo alla pagina INFO */
.info-scrivi {
  margin: 20px 0 6px;
  padding: 10px 1.2ch 8px;
  border: 0;
  background: var(--magenta);
  color: var(--bianco);
  font-weight: 700;
}

/* ---------- P.500: scrivi allo staff ---------- */
.guida-messaggio {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px var(--margine);
}

.messaggio-intro { margin: 0; color: var(--bianco); }

.messaggio-testo {
  width: 100%;
  min-height: 7.5em;
  resize: none;
  padding: 10px 12px;
  border: 2px solid var(--ciano);
  border-radius: 0;
  background: #000814;
  color: var(--ciano);
  caret-color: var(--giallo);
  font-family: var(--font-teletext);
  font-size: max(16px, var(--u)); /* almeno 16px: iPhone non fa lo zoom */
  line-height: 1.35;
  -webkit-user-select: text;
  user-select: text;
}

.messaggio-testo::placeholder { color: #2E7F86; }
.messaggio-testo:focus { outline: none; border-color: var(--giallo); }

.messaggio-piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.messaggio-conta { color: var(--ciano); font-size: calc(var(--u) * 0.85); }

.fast.messaggio-invia {
  flex: none;
  width: 140px;
  height: 50px;
}

.messaggio-esito { margin: 0; min-height: 1.3em; color: var(--giallo); }
.messaggio-esito.riuscito { color: var(--verde); }

.messaggio-nota {
  margin: 0;
  color: #9A9A9A;
  font-family: var(--font-payoff);
  font-size: 12px;
  line-height: 1.5;
}

.crediti-titolo {
  margin: 18px 0 6px;
  padding: 2px 1ch 1px;
  display: inline-block;
  background: var(--blu);
  color: var(--giallo);
  font-weight: 700;
  font-size: var(--u);
}

.guida-info .crediti-ruolo { color: var(--ciano); margin-top: 8px; }

.guida-info .crediti-nome a {
  display: inline-block;
  padding: 6px 0;
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* i quattro tasti colorati del Televideo */
.fastext {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 8px var(--margine) 14px;
}

.fast {
  --r: 12px;
  flex: var(--f, 1) 1 0;
  height: 50px;
  font-weight: 700;
  /* "ANALCOLICI" deve stare nel suo tasto anche sui telefoni stretti */
  font-size: min(calc(var(--u) * 0.84), calc(((min(100vw, 520px) - 2 * var(--margine) - 24px) / 3 - 10px) / 6));
}

/* la larghezza di ogni tasto segue la lunghezza della sua scritta */
.fast.fast--rosso  { --f: 9;  --c1: #FF6B6B; --c2: #F00000; --c3: #BE0000; --lato: #5E0000; --testo: #1A0000; }
.fast.fast--verde  { --f: 11; --c1: #8CFF8C; --c2: #00E800; --c3: #00B000; --lato: #005000; --testo: #001A00; }
.fast.fast--giallo { --f: 6;  --c1: #FFFF80; --c2: #FFF000; --c3: #D8C400; --lato: #736500; --testo: #1A1A00; }
.fast.fast--ciano  { --f: 7;  --c1: #8FFFFF; --c2: #00EDED; --c3: #00B4B4; --lato: #005454; --testo: #001A1A; }

.fast .cappuccio { padding: 2px 2px 0; }

/* filtro attivo: il tasto resta giù e il foro si illumina */
.fast[aria-pressed="true"] {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.95),
    0 0 0 2px var(--bianco);
}


/* =====================================================================
   TELECOMANDO: tasti in gomma che affondano nella scocca
   ===================================================================== */
.telecomando {
  flex: none;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 12px;
  margin: 2px 8px 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%),
    #1F1F23;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(255, 255, 255, 0.05),
    0 -10px 24px rgba(0, 0, 0, 0.7);
}

/* a TV spenta il telecomando ha solo il POWER */
.telecomando .power { --d: 58px; }
.menu.spenta .telecomando { grid-template-columns: 1fr; justify-items: center; }
.menu.spenta .tasto { display: none; }
.menu:not(.spenta) .telecomando .power { display: none; }

/* appena accesa, i tasti salgono dalla scocca uno dopo l'altro */
.menu.appena-acceso .tasto { animation: tasto-su 0.35s ease-out both; }
.menu.appena-acceso .tasto:nth-of-type(3) { animation-delay: 0.06s; }
.menu.appena-acceso .tasto:nth-of-type(4) { animation-delay: 0.12s; }

/* il foro nella scocca: resta fermo */
.tasto,
.fast {
  --c1: #5C5C63;
  --c2: #424248;
  --c3: #2F2F34;
  --lato: #141416;
  --testo: #EEEEEE;
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: #09090B;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.1);
}

/* il cappuccio di gomma: è lui che si muove */
.cappuccio {
  position: absolute;
  inset: 3px 3px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6ch;
  border-radius: calc(var(--r) - 3px);
  color: var(--testo);
  background:
    radial-gradient(130% 100% at 30% 0%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -3px 3px rgba(0, 0, 0, 0.28),
    0 4px 0 var(--lato),
    0 5px 1px rgba(0, 0, 0, 0.75),
    0 7px 8px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, filter 0.06s;
  pointer-events: none;
}

/* gomma opaca: una grana appena visibile */
.cappuccio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--grana, none);
  background-size: 96px 96px;
  opacity: 0.08;
  mix-blend-mode: overlay;
}

.tasto:active .cappuccio,
.tasto.premuto .cappuccio,
.fast:active .cappuccio,
.fast.premuto .cappuccio,
.fast[aria-pressed="true"] .cappuccio {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 3px 6px rgba(0, 0, 0, 0.4),
    0 0 0 var(--lato),
    0 1px 1px rgba(0, 0, 0, 0.75);
  filter: brightness(0.9);
}

.tasto {
  --r: 18px;
  height: 58px;
  font-weight: 700;
  font-size: calc(var(--u) * 1.1);
}

.tasto .cappuccio { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); }

.freccia {
  font-size: 0.75em;
  opacity: 0.85;
}

.tasto--guida {
  --c1: #FFFF80;
  --c2: #FFF000;
  --c3: #D8C400;
  --lato: #736500;
  --testo: #1A1A00;
}

.tasto--guida .cappuccio { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }

.tasto--guida[aria-expanded="true"] {
  --c1: #FF6B6B;
  --c2: #F00000;
  --c3: #BE0000;
  --lato: #5E0000;
  --testo: #FFFFFF;
}

.tasto--guida[aria-expanded="true"] .cappuccio { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }


/* =====================================================================
   SCHERMI ALTI (app aperta dalla Home) e SCHERMI BASSI (iPhone SE, mini)
   ===================================================================== */
@media (min-height: 740px) {
  :root { --u: clamp(14px, 4.5vw, 18px); }
  .scheda { gap: 8px; padding-top: 14px; }
  .tasto { height: 64px; }
}

@media (max-height: 640px) {
  .scheda { gap: 4px; padding-top: 8px; padding-bottom: 6px; }
  .scheda-descrizione { display: none; }
  .tasto { height: 54px; }
  .telecomando { padding-top: 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}


/* =====================================================================
   ANIMAZIONI
   ===================================================================== */
@keyframes lampeggio {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
}

@keyframes spegni {
  to { opacity: 0; }
}

/* il neon che si accende: tre scatti, poi fisso (mai più di 3 lampi al secondo) */
@keyframes neon-accende {
  0% { opacity: 0.06; }
  12% { opacity: 1; }
  18% { opacity: 0.2; }
  38% { opacity: 1; }
  46% { opacity: 0.35; }
  70%, 100% { opacity: 1; }
}

/* ogni tanto il neon ha un calo, come un'insegna vera */
@keyframes neon-ronzio {
  0%, 91%, 93%, 100% { opacity: 1; }
  92% { opacity: 0.72; }
}

@keyframes tasto-su {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes sobbalzo {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -2%); }
}

@keyframes strappo {
  0% { transform: translate(0, 0) skewX(0deg); }
  25% { transform: translate(-7%, -14%) skewX(9deg); }
  50% { transform: translate(5%, 20%) skewX(-7deg); }
  75% { transform: translate(-3%, -7%) skewX(4deg); }
}

@keyframes grana {
  0% { background-position: 0 0; }
  25% { background-position: -37px 51px; }
  50% { background-position: 64px -23px; }
  75% { background-position: -80px -90px; }
}

@keyframes rullo {
  to { transform: translateY(460%); }
}

@keyframes accensione {
  0% { transform: scale(0, 0.012); opacity: 1; }
  35% { transform: scale(1, 0.012); opacity: 1; }
  65% { transform: scale(1, 1); opacity: 0.85; }
  100% { transform: scale(1, 1); opacity: 0; }
}

@keyframes ridisegna {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* Chi ha attivato "Riduci movimento" su iPhone vede cambi istantanei */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rumore.attivo { opacity: 0.5; }
}