/* LO SCHERMO. Il palco è 1920x1080: --u è un punto del palco a questa finestra, --ox e --oy
   dove comincia. Tutto ciò che è testo sta fuori dalla camera, così ha il suo pavimento. */
html { background: var(--rosso); overflow: hidden; height: 100%; }
body { height: 100%; overflow: hidden; background: var(--rosso); }

#fondo, .tendina { position: fixed; inset: 0; }
#fondo { z-index: 1; background: var(--rosso); }
#tendina-sotto { z-index: 2; }
#mondo { z-index: 3; }
#lama { z-index: 4; background: #fff; }
#tendina-sopra { z-index: 5; overflow: hidden; }
#mondo-su { z-index: 6; pointer-events: none; }
#fisso { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
#voto { z-index: 8; }
#sotto { z-index: 9; }
#comandi { z-index: 10; }
[hidden] { display: none !important; }

.camera { position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
#mondo-copia { position: absolute; }
#scena { position: absolute; left: 0; top: 0; overflow: visible; }

/* Il campo */
.campo { position: absolute; inset: 0; pointer-events: none; }
.f { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.f-mano, .f-loop { width: 100%; height: 100%; }
.f-mano { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 800ms var(--mano); }
.f-loop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.f-loop[data-loop='galleggia'] { animation: galleggia var(--g-dur) ease-in-out var(--g-fase) infinite alternate; }
@keyframes galleggia {
  from { translate: calc(var(--g-x) * -1) calc(var(--g-y) * -1); }
  to { translate: var(--g-x) var(--g-y); }
}
.numero-sole { font: 700 96px Roboto, Arial, sans-serif; fill: var(--inchiostro); text-anchor: middle; dominant-baseline: central; }

/* La scena */
#sentiero { transition: stroke-dashoffset 2400ms cubic-bezier(0.45, 0, 0.2, 1); }
.gradino { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.2, 1); transition: opacity 240ms ease, transform 420ms var(--mano); }
.gradino.vivo { opacity: 1; transform: none; }
.gradino.sciolto { opacity: 0; transform: scale(0.1, 0.1); transition: opacity 700ms ease, transform 900ms ease; }
.sparisce { opacity: 0; transition: opacity 400ms ease; }
.sparisce.vivo { opacity: 1; }
.et { font: 700 30px Roboto, Arial, sans-serif; fill: #fff; text-anchor: middle; opacity: 0; transform: translateY(10px); transition: opacity 320ms ease, transform 620ms var(--mano); }
.et.vivo { opacity: 1; transform: none; }
.et-passo { font-size: 44px; }
.et-asta { text-anchor: start; }
.et-asta line { stroke: #fff; stroke-width: 2; }
.figura { transition: opacity 500ms ease; }
.figura.via { opacity: 0; }
.battito { fill: none; stroke: var(--ambra); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: battito 1900ms ease-out infinite; }
@keyframes battito {
  0% { transform: scale(0.4); opacity: 0.95; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* I titoli di scena */
.titolo {
  position: absolute;
  left: calc(var(--ox) + var(--u) * 97);
  top: calc(var(--oy) + var(--u) * 92);
  max-width: calc(var(--u) * 1500);
  color: #fff;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.012em;
  transition: opacity 240ms ease, transform 300ms ease;
}
.titolo.via { opacity: 0; transform: translateY(calc(var(--u) * -14)); }
.titolo .riga { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.02em; }
.titolo .riga > span { display: block; transform: translateY(112%); transition: transform 900ms var(--mano); }
.titolo .riga.dentro > span { transform: none; }
.t-occhiello { font-size: max(16px, calc(var(--u) * 30)); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; }
.t-xl { font-size: max(40px, calc(var(--u) * 138)); }
.t-l { font-size: max(30px, calc(var(--u) * 92)); }
.t-m { font-size: max(22px, calc(var(--u) * 56)); font-weight: 500; line-height: 1.16; letter-spacing: -0.004em; }
.t-gigante { font-size: max(46px, calc(var(--u) * 196)); line-height: 0.98; letter-spacing: -0.02em; }
.titolo.centro-v { top: calc(var(--oy) + var(--u) * 300); }
.titolo.collega { left: calc(var(--ox) + var(--u) * 700); top: calc(var(--oy) + var(--u) * 268); max-width: calc(var(--u) * 1080); color: var(--rosso); }
.titolo.collega em { font-style: normal; }
.titolo.collega .t-m, .titolo.su-bianco .t-m { color: #5A5D62; }

.barre { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 20) calc(var(--u) * 26); width: calc(var(--u) * 960); margin-top: calc(var(--u) * 34); font-size: max(18px, calc(var(--u) * 38)); font-weight: 500; letter-spacing: 0; }
.barre .barra { height: calc(var(--u) * 26); min-height: 12px; background: var(--grigio); border-radius: 2px; overflow: hidden; }
.barre .barra i { display: block; height: 100%; width: var(--p); background: var(--rosso); transform-origin: 0 50%; animation: barra 1100ms var(--mano) both; }
.barre .barra.seconda i { background: var(--inchiostro); }
.barre b { font-weight: 700; }
@keyframes barra { from { transform: scaleX(0); } }

/* La copertina del programma */
#copertina, #chiusura { position: absolute; inset: 0; }
.cop-testi { position: absolute; left: calc(var(--ox) + var(--u) * 97); top: calc(var(--oy) + var(--u) * 428); color: #fff; }
.cop-riga { margin: 0; font-size: max(22px, calc(var(--u) * 47)); font-weight: 700; letter-spacing: 0.01em; opacity: 0; transform: translateY(14px); }
.cop-riga-2 { margin-top: calc(var(--u) * 116); }
.cop-sotto { margin: calc(var(--u) * 22) 0 0; font-size: max(17px, calc(var(--u) * 35)); font-weight: 700; font-style: italic; letter-spacing: 0.06em; word-spacing: 0.1em; opacity: 0; transform: translateY(14px); }
.cop-loghi img { position: absolute; height: auto; opacity: 0; transform: translateY(14px); }
.logo-digited { left: calc(var(--ox) + var(--u) * 48); top: calc(var(--oy) + var(--u) * 909); width: calc(var(--u) * 416); }
.logo-24 { left: calc(var(--ox) + var(--u) * 803); top: calc(var(--oy) + var(--u) * 905); width: calc(var(--u) * 356); }
.logo-generali { left: calc(var(--ox) + var(--u) * 1696); top: calc(var(--oy) + var(--u) * 878); width: calc(var(--u) * 149); }
.vivo .cop-riga, .vivo .cop-sotto, .vivo .cop-loghi img { opacity: 1; transform: none; transition: opacity 500ms ease var(--r, 0ms), transform 1100ms var(--mano) var(--r, 0ms); }
.vivo .cop-riga { --r: 620ms; }
.vivo .cop-riga-2 { --r: 760ms; }
.vivo .cop-sotto { --r: 880ms; }
.vivo .cop-loghi img { --r: 1120ms; }
.vivo .cop-loghi .logo-24 { --r: 1200ms; }
.vivo .cop-loghi .logo-generali { --r: 1280ms; }

/* La carta di generali.it */
.carta {
  position: absolute;
  left: calc(var(--ox) + var(--u) * 1110);
  top: calc(var(--oy) + var(--u) * 60);
  width: calc(var(--u) * 700);
  border-radius: 4px;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(calc(var(--u) * 90));
}
.vivo .carta { opacity: 1; transform: none; transition: opacity 300ms ease 780ms, transform 1500ms var(--molla) 780ms; }
.carta-schede { display: flex; align-items: stretch; background: var(--ala); border-radius: 4px 4px 0 0; color: #fff; }
.scheda { display: flex; align-items: center; padding: calc(var(--u) * 20) calc(var(--u) * 34); background: #fff; color: var(--rosso); font-weight: 700; font-size: max(14px, calc(var(--u) * 23)); border-radius: 4px 4px 0 0; }
.carta-meta { display: flex; align-items: center; padding: 0 calc(var(--u) * 28); font-weight: 500; font-size: max(14px, calc(var(--u) * 22)); }
.carta-corpo { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 28) calc(var(--u) * 44) calc(var(--u) * 26); background: #fff; border-radius: 0 0 4px 4px; color: var(--inchiostro); }
.carta h1 { margin: 0; font-size: max(18px, calc(var(--u) * 36)); font-weight: 400; text-align: center; }
.qr-blocco { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--u) * 16); }
.qr { width: calc(var(--u) * 348); height: calc(var(--u) * 348); min-width: 120px; min-height: 120px; }
.qr svg { width: 100%; height: 100%; }
.qr-vuoto { display: grid; place-items: center; width: 100%; height: 100%; background: var(--grigio-chiaro); border-radius: 4px; }
.indirizzo { margin: calc(var(--u) * 2) 0 0; font-size: max(14px, calc(var(--u) * 23)); font-weight: 500; color: var(--testo); min-height: 1.3em; }
.presenti { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); min-height: max(28px, calc(var(--u) * 52)); margin-top: calc(var(--u) * 10); font-size: max(14px, calc(var(--u) * 24)); color: var(--testo); }
.presenti-figure { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; max-width: calc(var(--u) * 340); }
.presenti-figure svg { width: max(14px, calc(var(--u) * 26)); height: max(22px, calc(var(--u) * 42)); fill: var(--rosso); animation: entra-figura 620ms var(--molla) both; }
@keyframes entra-figura { from { transform: translateY(50%) scale(0.4); opacity: 0; } }
.presenti-conto { font-weight: 500; white-space: nowrap; }
.comincia { width: 100%; min-height: max(48px, calc(var(--u) * 76)); margin-top: calc(var(--u) * 14); font-size: max(16px, calc(var(--u) * 28)); }

/* La slide dell'agenda, ricomposta dall'XML */
#agenda { position: absolute; z-index: 5; left: 0; top: 0; width: 1920px; height: 1080px; color: #262626; font-size: 20px; line-height: 1.16; }
.ag-f[data-i='0'] { padding-left: 0 !important; }
.ag-f[data-i='0'] p { font-size: 46px; font-weight: 700; color: var(--rosso); line-height: 1; letter-spacing: -0.01em; }
.ag-f { position: absolute; display: flex; flex-direction: column; font-family: Roboto, Arial, sans-serif; letter-spacing: -0.012em; opacity: 0; transform: translateY(8px); }
.ag-f p { margin: 0; }
/* Coricato: anche l’apice dei minuti gira con le cifre, come nella slide. */
.ag-f[style*="writing-mode"] { text-orientation: sideways; }
#agenda.vivo .ag-f { opacity: 1; transform: none; transition: opacity 340ms ease calc(var(--i) * 8ms), transform 620ms var(--mano) calc(var(--i) * 8ms); }
#agenda .ag-logo { position: absolute; height: auto; }
.ag-cornice { position: absolute; border: 5px solid var(--inchiostro); border-radius: 4px; opacity: 0; transform: scale(1.04); }
.ag-cornice.vivo { opacity: 1; transform: none; box-shadow: 0 0 0 4000px rgba(255, 255, 255, 0.78); transition: opacity 200ms ease, transform 700ms var(--molla), box-shadow 500ms ease; }
#ag-segno { background: transparent; color: inherit; padding: 0 3px; margin: 0 -3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 420ms ease; }
#ag-segno.vivo { background: var(--ambra); }

/* Il voto */
#voto {
  position: fixed;
  left: calc(var(--ox) + var(--u) * 97);
  width: calc(var(--u) * 1726);
  top: calc(var(--oy) + var(--u) * 828);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 28);
}
#voto .scelta {
  gap: calc(var(--u) * 24);
  min-height: max(64px, calc(var(--u) * 122));
  padding: calc(var(--u) * 20) calc(var(--u) * 32);
  font-size: max(17px, calc(var(--u) * 37));
  font-weight: 500;
  line-height: 1.16;
  opacity: 0;
  transform: translateY(calc(var(--u) * 80));
}
#voto.vivo .scelta { opacity: 1; transform: none; transition: opacity 260ms ease, transform 1300ms var(--molla), border-color 160ms ease, box-shadow 160ms ease; }
#voto.vivo .scelta:nth-child(2) { transition-delay: 110ms, 110ms, 0ms, 0ms; }
#voto .radio { width: max(22px, calc(var(--u) * 36)); height: max(22px, calc(var(--u) * 36)); }
/* A voto chiuso le carte smettono di sembrare comandi: via i pallini, sotto la quota di ciascuna. */
#voto .scelta { --rientro: 8px; position: relative; overflow: hidden; }
#voto .scelta.vince { border-color: var(--rosso); box-shadow: 0 0 0 1px var(--rosso); }
#voto .scelta::after { content: ''; position: absolute; left: var(--rientro); bottom: var(--rientro); width: 0; height: max(6px, calc(var(--u) * 10)); border-radius: 3px; background: var(--rosso); transition: width 900ms var(--mano); }
#voto .scelta[data-c='scende']::after { background: var(--inchiostro); }
#voto.chiuso .radio { visibility: hidden; }
#voto.chiuso .scelta::after { width: calc(var(--quota, 0) * (100% - 2 * var(--rientro))); }
#voto:not([hidden]) ~ #sotto { bottom: calc(var(--oy) + var(--u) * 20); }
/* Chi non ha inquadrato il codice in copertina lo ritrova qui. */
#voto-qr { position: absolute; right: calc(var(--ox) + var(--u) * 97); top: calc(var(--oy) + var(--u) * 800); transform: translateY(-100%); display: flex; align-items: flex-end; gap: calc(var(--u) * 24); color: #fff; }
#voto-qr[hidden] { display: none; }
#voto-invito { margin: 0; font-size: max(16px, calc(var(--u) * 34)); font-weight: 700; line-height: 1.2; text-align: right; }
#qr-voto { width: max(120px, calc(var(--u) * 220)); height: max(120px, calc(var(--u) * 220)); flex: none; background: #fff; border-radius: 4px; }
#qr-voto svg { display: block; width: 100%; height: 100%; }
.scelta-conto { font-size: max(24px, calc(var(--u) * 56)); font-weight: 700; color: var(--inchiostro); font-variant-numeric: tabular-nums; line-height: 1; }

/* L'angolo del programma, col suo leone */
#logo-angolo { position: absolute; left: calc(var(--ox) + var(--u) * 1800); top: calc(var(--oy) + var(--u) * 986); width: calc(var(--u) * 104); height: auto; }
[data-verticale] #logo-angolo { display: none; }

/* Il collega */
.ai {
  position: absolute;
  z-index: 1;
  left: calc(var(--ox) + var(--u) * 230);
  top: calc(var(--oy) + var(--u) * 340);
  width: calc(var(--u) * 340);
  height: calc(var(--u) * 340);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nero-ai);
  color: #fff;
  font-size: calc(var(--u) * 124);
  font-weight: 700;
  transform-origin: 50% 50%;
}
.ai span { position: relative; }
.ai .onda { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 6) solid var(--nero-ai); opacity: 0; }

/* Le frecce del programma */
#frecce { position: absolute; left: calc(var(--ox) + var(--u) * 97); top: calc(var(--oy) + var(--u) * 340); width: calc(var(--u) * 1726); }
.frecce-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 10); }
.freccia { position: relative; opacity: 0; transform: translateX(calc(var(--u) * -40)); }
.vivo .freccia { opacity: 1; transform: none; transition: opacity 240ms ease calc(var(--i) * 90ms), transform 900ms var(--molla) calc(var(--i) * 90ms); }
.freccia-testa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--u) * 6);
  min-height: calc(var(--u) * 150);
  padding: calc(var(--u) * 14) calc(var(--u) * 48) calc(var(--u) * 14) calc(var(--u) * 22);
  background: var(--rosso);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - var(--u) * 30) 0, 100% 50%, calc(100% - var(--u) * 30) 100%, 0 100%);
}
.freccia-testa b { font-size: max(14px, calc(var(--u) * 24)); line-height: 1.12; }
.freccia-testa i { font-size: max(14px, calc(var(--u) * 21)); line-height: 1.16; }
.segno-ai { --lato: max(44px, calc(var(--u) * 84)); position: absolute; z-index: 1; right: calc(var(--lato) * 0.4); top: calc(var(--lato) * -0.78); width: var(--lato); height: var(--lato); display: grid; place-items: center; border-radius: 50%; background: var(--nero-ai); color: #fff; font-size: calc(var(--lato) * 0.365); font-style: normal; font-weight: 700; opacity: 0; }
.freccia.accesa .segno-ai { opacity: 1; transition: opacity 0s linear 420ms; }
.freccia p { margin: calc(var(--u) * 30) calc(var(--u) * 14) 0 0; font-size: max(16px, calc(var(--u) * 36)); font-weight: 700; color: var(--inchiostro); line-height: 1.1; opacity: 0.74; transform: translateY(calc(var(--u) * 10)); transition: opacity 300ms ease, transform 620ms var(--mano); }
.freccia p small { display: block; margin-top: calc(var(--u) * 12); font-size: max(14px, calc(var(--u) * 27)); font-weight: 400; line-height: 1.22; color: var(--testo); }
.freccia.accesa p { opacity: 1; transform: none; }

/* La chiusura */
.chiusura-azioni { position: absolute; left: calc(var(--ox) + var(--u) * 97); top: calc(var(--oy) + var(--u) * 752); display: flex; flex-wrap: wrap; gap: calc(var(--u) * 20); pointer-events: auto; }
.chiusura-azioni .bottone { min-height: max(48px, calc(var(--u) * 72)); padding: 0 calc(var(--u) * 44); font-size: max(15px, calc(var(--u) * 26)); }
.bottone-vuoto { background: transparent; border: 2px solid #fff; }
@media (hover: hover) { .bottone-vuoto:hover { background: #fff; color: var(--rosso); } }
.chiusura-credito { position: absolute; right: calc(var(--ox) + var(--u) * 109); top: calc(var(--oy) + var(--u) * 752); width: calc(var(--u) * 700); margin: 0; color: #fff; font-size: max(14px, calc(var(--u) * 22)); line-height: 1.3; }

/* I sottotitoli: su una banda piatta, le parole dette in pieno */
#sotto {
  position: fixed;
  left: 50%;
  bottom: calc(var(--oy) + var(--u) * 42);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(calc(var(--u) * 1340), calc(100vw - 32px));
  padding: calc(var(--u) * 12) calc(var(--u) * 28);
  border-radius: 4px;
  background: rgba(20, 23, 27, 0.86);
  color: #fff;
  font-size: max(16px, calc(var(--u) * 36));
  font-weight: 500;
  line-height: 1.28;
  text-align: center;
  pointer-events: none;
  transition: opacity 220ms ease;
}
#sotto[data-vuoto] { opacity: 0; }
#sotto p { margin: 0; }

/* I comandi: compaiono col mouse o col tocco, poi si tolgono di mezzo */
#comandi {
  position: fixed;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  background: rgba(20, 23, 27, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
#comandi.vivo { opacity: 1; pointer-events: auto; }
#comandi button { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #fff; cursor: pointer; }
#comandi svg { width: 24px; height: 24px; }
@media (hover: hover) { #comandi button:hover { background: var(--inchiostro-su); } }
body.senza-puntatore { cursor: none; }

/* In verticale: chi l'ha ricevuto sul telefono e lo guarda da solo */
[data-verticale] .cop-testi { left: calc(var(--u) * 52); top: calc(var(--u) * 150); }
[data-verticale] .cop-riga { font-size: calc(var(--u) * 66); }
[data-verticale] .cop-riga-2 { margin-top: calc(var(--u) * 26); }
[data-verticale] .cop-sotto { font-size: calc(var(--u) * 46); }
[data-verticale] .logo-digited { left: calc(var(--u) * 40); top: auto; bottom: calc(var(--u) * 38); width: calc(var(--u) * 200); }
[data-verticale] .logo-24 { left: calc(var(--u) * 290); top: auto; bottom: calc(var(--u) * 54); width: calc(var(--u) * 240); }
[data-verticale] .logo-generali { left: auto; right: calc(var(--u) * 44); top: auto; bottom: calc(var(--u) * 40); width: calc(var(--u) * 116); }
[data-verticale] .carta { left: calc(var(--u) * 40); right: calc(var(--u) * 40); top: auto; bottom: calc(var(--u) * 220); width: auto; transform: translateY(calc(var(--u) * 90)); }
[data-verticale] .vivo .carta { transform: none; }
[data-verticale] .qr-blocco, [data-verticale] .presenti { display: none; }
[data-verticale] .carta h1 { font-size: 18px; }
[data-verticale] .comincia { margin-top: 16px; min-height: 52px; }
[data-verticale] .carta-corpo { padding: 20px 20px 20px; }
[data-verticale] .scheda, [data-verticale] .carta-meta { font-size: 14px; }
[data-verticale] .scheda { padding: 12px 16px; }
[data-verticale] .carta-meta { padding: 0 12px; }

[data-verticale] .titolo { left: 24px; top: calc(56px + env(safe-area-inset-top)); max-width: calc(100vw - 48px); }
[data-verticale] .t-occhiello { font-size: 15px; }
[data-verticale] .t-xl { font-size: 56px; }
[data-verticale] .t-l { font-size: 34px; }
[data-verticale] .t-m { font-size: 21px; }
[data-verticale] .t-gigante { font-size: min(50px, 12.5vw); }
[data-verticale] .titolo.centro-v { top: 26vh; }
[data-verticale] .titolo.collega { left: 24px; top: 38vh; max-width: calc(100vw - 48px); }
[data-verticale] .barre { width: 100%; font-size: 16px; gap: 10px 12px; margin-top: 18px; }
[data-verticale] .ai { left: 24px; top: calc(64px + env(safe-area-inset-top)); width: 150px; height: 150px; font-size: 56px; }
@media (max-height: 640px) { [data-verticale] .ai { top: calc(40px + env(safe-area-inset-top)); width: 120px; height: 120px; font-size: 46px; } }
[data-verticale] #voto { left: 16px; right: 16px; width: auto; top: auto; bottom: 16px; grid-template-columns: 1fr; gap: 10px; }
[data-verticale] #voto .scelta { min-height: 76px; padding: 12px 16px; gap: 12px; font-size: 17px; transform: translateY(40px); }
[data-verticale] #voto.vivo .scelta { transform: none; }
[data-verticale] .scelta-conto { font-size: 28px; }
[data-verticale] #voto:not([hidden]) ~ #sotto { display: none; }
@media (min-height: 700px) { [data-verticale] #voto:not([hidden]) ~ #sotto { display: block; bottom: 186px; } }
[data-verticale] #sotto { left: 12px; right: 12px; width: auto; max-width: none; transform: none; bottom: calc(14px + env(safe-area-inset-bottom)); padding: 10px 14px; font-size: 17px; }
[data-verticale] #comandi { top: calc(6px + env(safe-area-inset-top)); bottom: auto; right: 6px; }
[data-verticale] #frecce { left: 24px; top: min(36vh, calc(100vh - 392px)); width: calc(100vw - 48px); }
[data-verticale] .frecce-lista { grid-template-columns: 1fr; gap: 8px; }
/* La punta della freccia finisce dove comincia il cerchio AI: il percorso si legge, e il cerchio non lo copre. */
[data-verticale] .freccia { --lunga: max(132px, calc(50% - 20px)); display: grid; grid-template-columns: var(--lunga) 1fr; align-items: center; gap: 0; }
[data-verticale] .freccia-testa { min-height: 54px; padding: 6px 22px 6px 12px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
[data-verticale] .freccia-testa b { font-size: 14px; }
[data-verticale] .freccia-testa i { display: none; }
[data-verticale] .freccia p { margin: 0; padding-left: 52px; font-size: 16px; }
[data-verticale] .freccia p small { display: none; }
[data-verticale] .segno-ai { --lato: 44px; right: auto; left: calc(var(--lunga) + 2px); top: 5px; }
[data-verticale] .chiusura-azioni { left: 24px; right: 24px; top: 46vh; flex-direction: column; }
[data-verticale] .chiusura-azioni .bottone { width: 100%; min-height: 52px; font-size: 16px; }
[data-verticale] .chiusura-credito { left: 24px; right: 24px; width: auto; top: auto; bottom: calc(var(--u) * 170); }

@media (prefers-reduced-motion: reduce) {
  .f-loop[data-loop='galleggia'], .battito { animation: none; }
  .titolo .riga > span, .gradino, .et, .sparisce, .vivo .carta, .vivo .cop-riga, .vivo .cop-sotto, .vivo .cop-loghi img, #voto.vivo .scelta, .vivo .freccia, #agenda.vivo .ag-f, #sentiero { transition: none !important; }
}
.titolo.su-bianco { color: var(--rosso); }