/* MANIFESTO · viewer v0.41 · «accensione, schermi LED, vetro, un gesto» (3 ottobre 2026)
   Sfondo = fotocamera, sempre. Un solo elemento memorabile: l'accensione. Poi niente animazioni gratuite.
   Token in :root (vedi test/DESIGN-viewer.md). Fraunces per i titoli, Manrope per l'interfaccia. */
:root{ --luce:#FFF4D6; --vetro:rgba(8,12,24,.55); --vetro-forte:rgba(8,12,24,.78); --vetro-chiaro:rgba(255,255,255,.08); --filo:rgba(255,255,255,.12);
  --ink:#FFFFFF; --muto:#B8BFD0; --oro:#C9991A; --oro-ink:#1A1300; --led:#0A0A0C; --notte:#05070D; --verde:#2BD38A; --rosso:#FF6A5C;
  --r:18px; --ease:cubic-bezier(.2,.8,.2,1); --safeB:env(safe-area-inset-bottom,0px); --safeT:env(safe-area-inset-top,0px); --dock:66px;
  --f-ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --f-display:"Fraunces","Iowan Old Style",Georgia,serif;
  /* vecchi nomi usati dai moduli: restano definiti */ --navy:#07122B; --gold:#C9991A; --em:#096B4A; --ruby:#B83228; --bg:#0B1020; --line:rgba(255,255,255,.12); --tab:66px; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html,body{ height:100%; margin:0; }
body{ font:500 15px/1.45 var(--f-ui); color:var(--ink); background:#000; overflow:hidden; -webkit-font-smoothing:antialiased; }
button{ font-family:inherit; touch-action:manipulation; cursor:pointer; } button:active{ transform:scale(.97); } a{ color:inherit; }
[hidden]{ display:none !important; }

/* ═══ VISTA AR ═══ */
#ar{ position:fixed; inset:0; background:#000; } #cam{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#stage{ position:absolute; inset:0; overflow:hidden; } /* v0.41 FACCIATE: ogni schermo ha la sua perspective nel transform */
/* riflesso caldo sul selciato: compare con l'accensione, poi svanisce */
#riflesso{ position:absolute; left:0; right:0; bottom:0; height:52vh; pointer-events:none; opacity:0; transition:opacity .7s var(--ease); background:radial-gradient(120% 70% at 50% 100%,var(--riflesso,rgba(255,236,190,.5)) 0%,rgba(255,244,214,.14) 45%,transparent 75%); mix-blend-mode:screen; }
#riflesso.on{ opacity:1; } #riflesso.on.quieto{ opacity:.32; transition-duration:2.4s; }
/* onda di luce che attraversa lo schermo: una volta sola */
@keyframes mfOnda{ from{ transform:translateX(-60%); opacity:0; } 15%{ opacity:1; } 85%{ opacity:1; } to{ transform:translateX(60%); opacity:0; } }
.onda{ position:absolute; top:-10%; bottom:-10%; left:0; width:100%; pointer-events:none; z-index:4; mix-blend-mode:screen; animation:mfOnda 1s cubic-bezier(.35,.05,.25,1) both; background:linear-gradient(100deg,transparent 22%,rgba(255,244,214,.10) 34%,rgba(255,236,190,.38) 45%,rgba(255,250,235,.95) 50%,rgba(255,236,190,.38) 55%,rgba(255,244,214,.10) 66%,transparent 78%); filter:blur(2px); }

/* ─ LO SCHERMO LED ─ cornice scura sottile, immagine a tutto campo, trama a pixel, bagliore del colore medio */
.board{ position:absolute; left:50%; top:50%; width:340px; transform-origin:center; border:5px solid var(--led); border-radius:3px; background:#000; overflow:hidden; cursor:pointer; will-change:transform; backface-visibility:hidden; opacity:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 34px 6px var(--riverbero,rgba(255,220,140,.42)), 0 22px 50px rgba(0,0,0,.45); }
.board canvas.fc{ width:100%; height:100%; display:block; border-radius:2px; }
.board video.vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:2px; background:#000; }
.board::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:2px; opacity:.03; background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); }
.board::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:2px; background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%); }
.board.senza-tit .tit{ display:none; }
.board .tit{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:38px 16px 12px; color:#fff; background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.35) 55%,transparent); pointer-events:none; }
.board .tit b{ display:block; font:900 30px/1.02 var(--f-display); letter-spacing:-.01em; text-shadow:0 2px 10px rgba(0,0,0,.55); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:break-word; hyphens:auto; white-space:normal; }
.board .tit small{ display:block; margin-top:4px; font:700 12px/1.2 var(--f-ui); color:rgba(255,244,214,.72); }
.board .dalvivo{ position:absolute; right:10px; top:10px; z-index:4; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; background:rgba(5,7,13,.72); color:#fff; font:700 11px/1 var(--f-ui); white-space:nowrap; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:none; }
.board .dalvivo i{ width:7px; height:7px; border-radius:50%; background:var(--oro); box-shadow:0 0 6px rgba(201,153,26,.8); }
.board .dalvivo.no i{ background:#777; animation:none; }
@keyframes mfPulse{ 0%{ box-shadow:0 0 0 0 rgba(201,153,26,.6); } 100%{ box-shadow:0 0 0 9px rgba(201,153,26,0); } }
.board .prog{ position:absolute; left:0; bottom:0; height:4px; z-index:5; background:var(--oro); transition:width .1s linear; pointer-events:none; }
/* spento prima dell'accensione; sfarfallio LED all'accensione (una volta per schermo); poi fermo */
.board.spento{ filter:brightness(.04); box-shadow:0 0 0 1px rgba(0,0,0,.6); }
@keyframes mfAccendi{ 0%{ filter:brightness(.04); } 14%{ filter:brightness(2.4) saturate(.2); } 22%{ filter:brightness(.25); } 34%{ filter:brightness(1.9) saturate(.6); } 44%{ filter:brightness(.7); } 62%{ filter:brightness(1.35); } 100%{ filter:brightness(1); } }
.board.accendi{ animation:mfAccendi .85s cubic-bezier(.2,.7,.2,1) both; }
.board.retro{ background:linear-gradient(135deg,#55595e,#2e3236); } .board.retro > *{ visibility:hidden; }
.board.forma-oggetto{ border:0; background:transparent; box-shadow:none; }
.board.eff-angolo{ background:transparent; box-shadow:none; border:0; } .board.eff-angolo::after, .board.eff-angolo::before{ display:none; }
.board .piega{ display:flex; width:100%; height:100%; perspective:900px; transform-style:preserve-3d; }
.board .piega canvas.fc{ width:50%; height:100%; display:block; border-radius:0; }
.board .piega .sx{ transform-origin:right center; transform:rotateY(-42deg); filter:brightness(.88); } .board .piega .dx{ transform-origin:left center; transform:rotateY(42deg); }
/* v0.41 FACCIATE · profondità: --sf sfocatura, --ss saturazione, --sb luminosità (le calcola resa() con distanza e sera) */
.board canvas.fc, .board video.vid{ filter:blur(var(--sf,0px)) saturate(var(--ss,1.3)) brightness(var(--sb,1.2)) contrast(calc(1.05 + .05*var(--sera,0))); }
/* v0.41 FACCIATE: il bagliore del pannello cresce con la sera (--sera 0…1, da resa()) */
.board{ box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 calc(30px + 40px*var(--sera,0)) calc(4px + 10px*var(--sera,0)) var(--riverbero,rgba(255,220,140,.42)), 0 22px 50px rgba(0,0,0,.45); }
/* lampo del tocco: cerchio di luce che si apre dal punto toccato, 300 ms */
@keyframes mfLampo{ from{ transform:translate(-50%,-50%) scale(.1); opacity:.9; } to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }
.lampo-tocco{ position:absolute; width:420px; height:420px; display:block; border-radius:50%; z-index:6; pointer-events:none; background:radial-gradient(circle,rgba(255,244,214,.95) 0%,rgba(255,244,214,.35) 35%,transparent 70%); mix-blend-mode:screen; animation:mfLampo .3s ease-out both; }
.pali{ position:absolute; pointer-events:none; display:flex; justify-content:space-between; } .pali i{ display:block; width:var(--sp,6px); height:100%; border-radius:2px; background:linear-gradient(90deg,#1c2126,#8a949c 40%,#3a4046 70%,#15181b); }

/* ─ PILL in alto: la via e gli schermi accesi ─ */
#hud{ position:absolute; left:50%; top:calc(var(--safeT) + 12px); transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:10px; max-width:92vw; padding:9px 14px 9px 16px; border-radius:99px; background:var(--vetro); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--filo), 0 8px 30px rgba(0,0,0,.35); color:#fff; }
#hud b{ font:700 15px/1.1 var(--f-ui); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; user-select:none; -webkit-user-select:none; }
#hud-s{ display:flex; align-items:center; gap:7px; font:700 13px/1.1 var(--f-ui); color:var(--muto); white-space:nowrap; }
#hud-s i{ width:7px; height:7px; border-radius:50%; background:#777; flex:none; } #hud-s i.ok{ background:var(--luce); box-shadow:0 0 8px rgba(255,244,214,.9); } #hud-s i.med{ background:var(--oro); } #hud-s i.ko{ background:var(--rosso); }
#b-solido{ border:0; border-radius:99px; padding:5px 10px; font:700 12px var(--f-ui); background:var(--vetro-chiaro); color:#fff; }
/* ─ SUSSURRO: una riga trasparente, solo se non c'è niente in vista ─ */
#guida{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(var(--dock) + var(--safeB) + 22px); z-index:5; pointer-events:none; }
#guida .gd{ pointer-events:auto; display:flex; align-items:center; gap:9px; padding:8px 15px 8px 9px; border-radius:99px; background:rgba(8,12,24,.38); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 0 0 1px var(--filo); color:#fff; font:700 14px/1.1 var(--f-ui); white-space:nowrap; max-width:86vw; animation:mfSu .3s var(--ease); }
#guida .gd .fr{ width:26px; height:26px; border-radius:50%; background:rgba(255,244,214,.14); display:grid; place-items:center; flex:none; transition:transform .25s var(--ease); } #guida .gd .fr svg{ width:14px; height:14px; }
#guida .gd span{ overflow:hidden; text-overflow:ellipsis; } #guida .gd small{ font-weight:600; color:var(--muto); } #guida .gd .fr{ color:var(--luce); }
#sussurro{ position:fixed; left:50%; bottom:calc(var(--dock) + var(--safeB) + 24px); transform:translate(-50%,8px); z-index:21; padding:8px 14px; border-radius:99px; background:rgba(8,12,24,.38); max-width:92vw; overflow:hidden; text-overflow:ellipsis; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); color:var(--muto); font:700 13px var(--f-ui); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; white-space:nowrap; }
#sussurro.on{ opacity:1; transform:translate(-50%,0); pointer-events:auto; } #sussurro a{ color:#fff; text-decoration:none; }
#app-chip{ position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--safeT) + 62px); z-index:25; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:94vw; } #app-chip span{ background:var(--vetro); color:#fff; border-radius:99px; padding:5px 6px 5px 12px; font:700 12px/1.2 var(--f-ui); display:inline-flex; align-items:center; gap:8px; box-shadow:inset 0 0 0 1px var(--filo); } #app-chip button{ border:0; background:var(--vetro-chiaro); color:#fff; border-radius:99px; width:22px; height:22px; font-weight:800; }
/* registratore di campo (strumento tecnico, si apre tenendo premuto il nome della via) */
#reg{ position:absolute; left:12px; right:12px; top:calc(var(--safeT) + 70px); background:var(--vetro-forte); color:#fff; border-radius:var(--r); padding:12px 14px; z-index:8; box-shadow:inset 0 0 0 1px var(--filo); } .rg-f{ font-size:12px; font-weight:700; color:var(--muto); } .rg-t{ font-size:17px; font-weight:700; margin:4px 0 8px; } .rg-bar{ height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; } .rg-bar i{ display:block; height:100%; width:0; background:var(--oro); } #rg-x{ margin-top:8px; border:0; border-radius:10px; padding:8px 12px; font:700 14px var(--f-ui); background:#fff; color:#000; }
/* AR solida (WebXR) · overlay */
#xro{ position:fixed; inset:0; z-index:30; pointer-events:none; font:500 15px/1.4 var(--f-ui); color:#fff; } #xro button{ pointer-events:auto; } .xr-top{ position:absolute; left:0; right:0; top:0; padding:calc(var(--safeT) + 10px) 14px 10px; display:flex; align-items:center; } .xr-top b{ font-family:var(--f-display); } .xr-top button{ margin-left:auto; border:0; border-radius:99px; padding:8px 14px; font:700 14px var(--f-ui); background:var(--vetro); color:#fff; } .xr-bot{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px calc(var(--safeB) + 12px); } .xr-info{ text-align:center; font-weight:700; margin-bottom:6px; } .xr-row{ display:flex; gap:6px; justify-content:center; margin-top:6px; } .xr-chip{ border:0; background:var(--vetro); color:#fff; border-radius:99px; padding:7px 12px; font:700 13px var(--f-ui); } .xr-chip.on{ background:var(--oro); color:var(--oro-ink); } .xr-b{ border:0; border-radius:14px; padding:13px 14px; font:700 15px var(--f-ui); background:var(--vetro); color:#fff; } .xr-p{ flex:1; background:var(--oro); color:var(--oro-ink); }

/* ═══ DOCK di vetro: tre voci ═══ */
#tabs{ position:fixed; left:12px; right:12px; bottom:calc(var(--safeB) + 10px); z-index:20; height:var(--dock); display:none; border-radius:24px; background:var(--vetro); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); box-shadow:inset 0 0 0 1px var(--filo), 0 10px 40px rgba(0,0,0,.4); }
#tabs.on{ display:flex; } #tabs.festa{ z-index:73; }
#tabs button{ flex:1; border:0; background:none; color:var(--muto); font:700 11px/1.1 var(--f-ui); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; }
#tabs button svg{ width:22px; height:22px; stroke-width:1.6; } #tabs button.on{ color:#fff; } #tabs button.on svg{ stroke:var(--luce); filter:drop-shadow(0 0 6px rgba(255,244,214,.55)); }
#tabs .conta[hidden]{ display:none!important; } #tabs .conta{ position:absolute; top:8px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--oro); color:var(--oro-ink); font:800 11px/18px var(--f-ui); text-align:center; transition:transform .3s var(--ease); } #tabs .conta.salta{ transform:scale(1.35); }

/* ═══ AVVIO: un gesto e la strada si accende ═══ */
#avvio{ position:fixed; inset:0; z-index:15; background:radial-gradient(90% 60% at 50% 110%,rgba(255,244,214,.16),transparent 60%),radial-gradient(70% 45% at 50% 0%,rgba(201,153,26,.14),transparent 60%),var(--notte); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 24px calc(var(--safeB) + 28px); }
#avvio h1{ font:900 52px/1 var(--f-display); letter-spacing:-.03em; margin:0 0 18px; text-shadow:0 0 40px rgba(255,244,214,.25); } #avvio .s{ color:var(--muto); font:500 13px/1.4 var(--f-ui); margin:0 0 30px; max-width:280px; }
#avvio .claim{ max-width:320px; font:700 22px/1.3 var(--f-ui); margin:0 0 14px; letter-spacing:-.01em; color:var(--luce); }
#avvio .perm{ display:flex; gap:22px; justify-content:center; margin:0 0 30px; font:700 12px var(--f-ui); color:var(--muto); } #avvio .perm div{ display:flex; flex-direction:column; align-items:center; gap:7px; } #avvio .perm svg{ width:22px; height:22px; stroke:var(--luce); }
#avvio .go{ width:100%; max-width:340px; border:0; border-radius:20px; padding:18px; font:700 17px var(--f-ui); background:var(--oro); color:var(--oro-ink); box-shadow:0 14px 40px rgba(201,153,26,.3); }
#avvio .alt{ margin-top:14px; border:0; background:none; color:#fff; font:700 15px var(--f-ui); padding:10px; opacity:.85; }
#avvio .piccolo{ position:absolute; bottom:calc(var(--safeB) + 40px); left:0; right:0; } #avvio .firma{ position:absolute; bottom:calc(var(--safeB) + 16px); font:700 11px var(--f-ui); color:rgba(184,191,208,.5); }
.piccolo{ text-align:center; font:600 12px var(--f-ui); color:var(--muto); padding:14px 0 6px; } .piccolo a{ color:#fff; text-decoration:none; }

/* ═══ VICINO (feed): un cartellone per schermata ═══ */
#feed{ position:fixed; inset:0; z-index:17; background:var(--notte); display:none; flex-direction:column; }
#feed.on{ display:flex; animation:mfSu .25s var(--ease); } @keyframes mfSu{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
#feed .mh{ position:absolute; left:0; right:0; top:0; z-index:2; padding:calc(var(--safeT) + 14px) 18px 18px; background:linear-gradient(180deg,rgba(5,7,13,.95),transparent); pointer-events:none; }
#feed .mh b{ font:900 20px/1 var(--f-display); } #feed .mh small{ display:block; color:var(--muto); font:700 13px var(--f-ui); margin-top:3px; }
#fl{ flex:1; overflow-y:auto; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:calc(var(--dock) + var(--safeB) + 10px); } #fl::-webkit-scrollbar{ display:none; }
.fc-v{ min-height:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; justify-content:center; padding:calc(var(--safeT) + 60px) 16px calc(var(--dock) + 24px); position:relative; }
.fc-in{ width:100%; max-width:460px; margin:0 auto; }
.fc-t{ margin:14px 4px 12px; } .fc-t b{ display:block; font:900 28px/1.08 var(--f-display); letter-spacing:-.01em; } .fc-t span{ display:block; color:var(--muto); font:600 14px var(--f-ui); margin-top:4px; }
.fc-a{ display:flex; gap:8px; }
.vuoto{ text-align:center; padding:40px 20px; color:var(--muto); margin:auto; } .vuoto b{ display:block; font:800 20px var(--f-display); color:#fff; margin:10px 0 6px; } .vuoto .e{ font-size:40px; }
.sk{ border-radius:var(--r); background:linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 100%); background-size:200% 100%; animation:mfSk 1.1s linear infinite; height:74px; margin-bottom:10px; } @keyframes mfSk{ to{ background-position:-200% 0; } } .sk.riga{ height:92px; } .sk.testo{ height:22px; width:60%; margin:8px 0; }
/* FOTO a tutto campo (scheda e feed): la tela nuda del motore o l'immagine, angoli arrotondati, nome in Fraunces sopra */
.foto{ position:relative; border-radius:20px; overflow:hidden; background:#0b0f1a; aspect-ratio:16/10; box-shadow:0 20px 50px rgba(0,0,0,.5); } .foto img, .foto canvas, .foto video{ width:100%; height:100%; object-fit:cover; display:block; }
.foto.libero{ display:grid; place-items:center; color:var(--muto); font:700 14px var(--f-ui); }
.foto .dalvivo{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:99px; background:rgba(5,7,13,.7); color:#fff; font:700 12px/1 var(--f-ui); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .foto .dalvivo i{ width:7px; height:7px; border-radius:50%; background:var(--oro); }
.arr-banner{ display:flex; width:100%; gap:10px; align-items:center; text-align:left; background:var(--vetro-chiaro); color:#fff; border:0; border-radius:14px; padding:9px 12px; margin:0 0 12px; font:inherit; box-shadow:inset 0 0 0 1px var(--filo); }
.arr-banner span:first-child{ font-size:20px; } .arr-banner span:nth-child(2){ flex:1; display:flex; flex-direction:column; } .arr-banner b{ font-weight:700; } .arr-banner small{ font:700 12px var(--f-ui); color:var(--muto); } .arr-banner em{ font-style:normal; color:var(--oro); font-weight:700; }

/* ═══ FOGLIO di vetro scuro, dal basso ═══ */
#velo{ position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .25s; } #velo.on{ opacity:1; pointer-events:auto; }
#sheet{ position:fixed; overflow:hidden; left:0; right:0; bottom:0; z-index:40; background:rgba(8,12,24,.86); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4); border-radius:28px 28px 0 0; box-shadow:0 -1px 0 var(--filo), 0 -20px 60px rgba(0,0,0,.5); max-height:92vh; display:flex; flex-direction:column; transform:translateY(105%); transition:transform .32s var(--ease); color:#fff; }
#sheet.on{ transform:none; } #sheet.drag{ transition:none; }
.grab{ padding:10px 0 2px; display:flex; justify-content:center; touch-action:none; } .grab i{ width:40px; height:5px; border-radius:3px; background:rgba(255,255,255,.22); }
.sh-top{ position:absolute; left:12px; right:12px; top:10px; z-index:3; display:flex; align-items:center; gap:8px; touch-action:none; pointer-events:none; } .sh-top > *{ pointer-events:auto; } .sh-top .ind, .sh-x{ border:0; background:rgba(8,12,24,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px var(--filo); width:34px; height:34px; border-radius:50%; font-size:17px; color:#fff; flex:none; display:grid; place-items:center; } .sh-x{ margin-left:auto; } .sh-top .passo{ margin-left:auto; display:flex; gap:5px; } .sh-top .passo i{ width:22px; height:4px; border-radius:3px; background:rgba(255,255,255,.18); } .sh-top .passo i.on{ background:#fff; } .passo + .sh-x{ margin-left:8px; }
.sh-body{ overflow-y:auto; padding:8px 18px 12px; -webkit-overflow-scrolling:touch; } .sh-body > :first-child:not(.foto){ margin-right:46px; } #sheet.con-ind .sh-body{ padding-top:50px; }
.sh-foot{ padding:10px 18px calc(var(--safeB) + 14px); display:flex; gap:8px; } .sh-foot:empty{ display:none; }
#sheet h2{ margin:14px 0 2px; font:900 28px/1.08 var(--f-display); letter-spacing:-.015em; color:#fff; } .h2s{ color:var(--muto); margin:0 0 14px; font:600 15px/1.4 var(--f-ui); }
.pv-k{ font:700 12px var(--f-ui); color:var(--oro); margin:10px 0 0; }
.note{ color:var(--muto); font:600 13px/1.45 var(--f-ui); }
/* un solo pulsante grande in oro: gli altri sono chip discreti */
.btnf{ flex:1; width:100%; border:0; border-radius:18px; padding:17px 16px; font:700 17px/1.1 var(--f-ui); background:var(--oro); color:var(--oro-ink); box-shadow:0 12px 34px rgba(201,153,26,.28); } a.btnf{ display:block; text-align:center; text-decoration:none; }
.btnf.g{ background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); flex:0 1 auto; width:auto; padding:12px 16px; font-size:15px; border-radius:99px; white-space:nowrap; }
.btnf:disabled{ opacity:.5; }
.sh-foot{ flex-wrap:wrap; } .sh-foot .btnf.oro{ flex:1 1 100%; } .sh-foot .btnf.g{ flex:1 1 auto; }
#sheet.con-principale .sh-foot{ padding-top:4px; } #sheet.con-principale .sh-foot .btnf.oro{ flex:1 1 auto; width:auto; background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); padding:12px 16px; font-size:15px; border-radius:99px; }
.chip{ border:0; background:var(--vetro-chiaro); color:#fff; border-radius:99px; padding:10px 14px; font:700 14px var(--f-ui); box-shadow:inset 0 0 0 1px var(--filo); white-space:nowrap; } .chip.on{ background:#fff; color:#000; }
.card{ background:var(--vetro-chiaro); border-radius:var(--r); padding:14px; margin:10px 0; box-shadow:inset 0 0 0 1px var(--filo); } .card.zp{ box-shadow:inset 0 0 0 1px rgba(201,153,26,.6); }
.field{ margin:10px 0; } .field label{ display:block; font:700 13px var(--f-ui); color:var(--muto); margin-bottom:5px; } .field input,.field textarea,.field select{ width:100%; font:600 16px var(--f-ui); color:#fff; padding:13px 14px; border:0; border-radius:14px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px var(--filo); } .field input::placeholder{ color:rgba(184,191,208,.6); } .field input:focus,.field textarea:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--oro); }
.row{ display:flex; gap:8px; }
.fatti{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; } .fatti div{ background:var(--vetro-chiaro); border-radius:14px; padding:10px; text-align:center; box-shadow:inset 0 0 0 1px var(--filo); } .fatti b{ display:block; font:800 16px var(--f-ui); color:#fff; } .fatti small{ color:var(--muto); font:600 12px var(--f-ui); }
.tipi{ display:grid; gap:10px; margin:12px 0; } .tipo{ display:flex; align-items:center; gap:14px; text-align:left; border:0; background:var(--vetro-chiaro); border-radius:18px; padding:16px; font:inherit; color:#fff; box-shadow:inset 0 0 0 1px var(--filo); } .tipo .e{ font-size:28px; } .tipo b{ display:block; font:700 16px var(--f-ui); } .tipo small{ color:var(--muto); font:600 13px var(--f-ui); } .tipo.on{ box-shadow:inset 0 0 0 2px var(--oro); }
.paga{ display:grid; gap:10px; margin:12px 0; } .paga .tipo.fr{ box-shadow:inset 0 0 0 1.5px rgba(43,211,138,.6); } .paga .tipo.fr b{ color:var(--verde); }
.fr-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(43,211,138,.18); color:var(--verde); font:700 12px var(--f-ui); border-radius:99px; padding:6px 11px; margin:10px 0 0; }
details.altro{ margin:10px 0; } details.altro summary{ list-style:none; cursor:pointer; font:700 15px var(--f-ui); color:#fff; padding:12px 0; } details.altro summary::-webkit-details-marker{ display:none; } details.altro summary::after{ content:'›'; float:right; transition:transform .2s; font-size:20px; line-height:1; } details.altro[open] summary::after{ transform:rotate(90deg); }
.scorri{ display:flex; justify-content:space-between; align-items:center; margin:8px 0 0; color:var(--muto); font:700 12px var(--f-ui); } .scorri button{ border:0; background:none; color:#fff; font:700 20px var(--f-ui); padding:6px 10px; } .scorri button:disabled{ opacity:.3; }
#toast{ position:fixed; left:50%; bottom:calc(var(--safeB) + 96px); transform:translate(-50%,8px); background:rgba(8,12,24,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#fff; padding:12px 18px; border-radius:20px; line-height:1.3; font:700 14px var(--f-ui); z-index:60; opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; max-width:88vw; text-align:center; box-shadow:inset 0 0 0 1px var(--filo), 0 10px 30px rgba(0,0,0,.35); } body.foglio #toast{ bottom:calc(var(--safeB) + 118px); } #toast.on{ opacity:1; transform:translate(-50%,0); }
/* dal vivo, biglietto, menu, ordine */
.pv-ok{ display:inline-block; background:rgba(255,244,214,.12); color:var(--luce); font:700 13px var(--f-ui); border-radius:99px; padding:6px 12px; margin:12px 0 0; } .pv-no{ display:inline-block; background:rgba(255,106,92,.18); color:var(--rosso); font:700 13px var(--f-ui); border-radius:99px; padding:6px 12px; margin:12px 0 0; }
.biglietto{ background:var(--vetro-chiaro); border-radius:22px; padding:18px; text-align:center; margin:12px 0; box-shadow:inset 0 0 0 1px rgba(201,153,26,.55); }
.biglietto .qr{ background:#fff; width:176px; height:176px; margin:0 auto 12px; border-radius:14px; padding:8px; } .biglietto .qr svg{ width:100%; height:100%; display:block; }
.biglietto .cod{ font:900 34px/1.1 var(--f-display); letter-spacing:.12em; color:var(--oro); }
.biglietto .tempo{ margin-top:8px; color:var(--muto); font:600 14px var(--f-ui); } .biglietto .tempo b{ color:#fff; font-size:18px; }
.vivo-l{ margin:12px 0 4px; display:grid; gap:8px; }
.vivo-i{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--vetro-chiaro); border:0; border-radius:14px; padding:11px 12px; font:inherit; color:#fff; margin:6px 0; box-shadow:inset 0 0 0 1px var(--filo); }
.vivo-i .dot{ width:9px; height:9px; border-radius:50%; background:var(--oro); flex:none; } .vivo-i.no .dot{ background:#777; } .vivo-i.no{ opacity:.6; }
.vivo-i span:nth-child(2){ flex:1; display:flex; flex-direction:column; } .vivo-i b{ font-weight:700; } .vivo-i small{ color:var(--muto); font:600 12.5px var(--f-ui); } .vivo-i em{ font-style:normal; font-weight:700; color:var(--oro); white-space:nowrap; }
.tondo{ width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:#000; font-size:22px; font-weight:800; } .tondo.pic{ width:34px; height:34px; font-size:19px; }
.mini{ display:flex; align-items:center; gap:6px; font:600 13px var(--f-ui); color:var(--muto); }
.vv{ background:var(--vetro-chiaro); border-radius:14px; padding:10px; margin:8px 0; } .vv .row{ align-items:center; margin:4px 0; flex-wrap:wrap; } .vv input, .vv select{ font:600 14px var(--f-ui); color:#fff; padding:8px 10px; border:0; border-radius:10px; background:rgba(255,255,255,.1); min-width:0; } .vv-n b{ font-size:24px; min-width:44px; text-align:center; } .vv-l{ color:var(--muto); font-size:13px; }
.ms{ font:800 15px/1.2 var(--f-display); margin:18px 2px 6px; color:#fff; }
.mv{ display:flex; gap:10px; align-items:center; background:var(--vetro-chiaro); border-radius:16px; padding:8px; margin:6px 0; box-shadow:inset 0 0 0 1px var(--filo); }
.mv img{ width:70px; height:70px; object-fit:cover; border-radius:12px; background:#1a2030; flex:none; }
.mv .mt{ flex:1; display:flex; flex-direction:column; min-width:0; } .mv .mt b{ font-weight:700; } .mv .mt small{ color:var(--muto); font:600 12.5px var(--f-ui); } .mv .mt em{ font-style:normal; font-weight:700; color:var(--oro); margin-top:2px; }
.mv .mq{ display:flex; align-items:center; gap:6px; } .mv .mq b{ min-width:18px; text-align:center; }
.combo{ display:flex; width:100%; align-items:center; gap:10px; text-align:left; background:rgba(201,153,26,.14); color:#fff; border:0; border-radius:16px; padding:12px 14px; font:inherit; margin:8px 0; box-shadow:inset 0 0 0 1px rgba(201,153,26,.6); }
.combo span{ flex:1; display:flex; flex-direction:column; } .combo b{ font-weight:700; } .combo small{ color:var(--muto); font:600 13px var(--f-ui); } .combo em{ font-style:normal; font-weight:700; color:var(--oro); white-space:nowrap; } .combo.on{ background:rgba(43,211,138,.16); box-shadow:inset 0 0 0 1px rgba(43,211,138,.6); } .combo.on em{ color:var(--verde); }
.arr{ display:flex; gap:10px; align-items:center; background:var(--vetro-chiaro); border-radius:14px; padding:10px 12px; margin:8px 0; } .arr .ic{ font-size:24px; } .arr .tx{ flex:1; display:flex; flex-direction:column; } .arr .tx b{ font-weight:700; } .arr .tx small{ color:var(--muto); font:600 12.5px var(--f-ui); } .arr .cr{ font:700 12px/1 var(--f-ui); color:var(--oro); background:rgba(201,153,26,.14); border-radius:99px; padding:7px 9px; white-space:nowrap; }
/* menu sospeso accanto al cartellone (pannello 3D di vetro) */
.mf-menu3d{ position:absolute; left:0; top:0; width:172px; transform-origin:center; z-index:1500; color:#fff; background:var(--vetro-forte); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-radius:18px; padding:10px 10px 9px; box-shadow:inset 0 0 0 1px var(--filo), 0 18px 44px rgba(0,0,0,.5); will-change:transform; cursor:pointer; opacity:0; transition:opacity .25s var(--ease); }
.mf-menu3d.on{ opacity:1; }
.mf-menu3d .mn{ font:700 11px/1.2 var(--f-ui); color:var(--muto); margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mf-menu3d .mp{ display:flex; align-items:center; gap:8px; margin:4px 0; min-width:0; } .mf-menu3d .mp img{ width:36px; height:36px; border-radius:10px; object-fit:cover; background:#1a2030; flex:none; }
.mf-menu3d .mp span{ flex:1; min-width:0; font:700 13px/1.15 var(--f-ui); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .mf-menu3d .mp em{ font-style:normal; font-weight:700; font-size:12.5px; color:var(--oro); white-space:nowrap; }
.mf-menu3d .mp.combo{ background:rgba(201,153,26,.14); border-radius:12px; padding:5px 6px; margin:0 0 6px; } .mf-menu3d .mp.combo span{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.1; }
.mf-menu3d .mo{ display:block; width:100%; border:0; border-radius:12px; padding:14px 11px; min-height:44px; margin-top:8px; font:700 15px/1 var(--f-ui); background:var(--oro); color:var(--oro-ink); }
.mf-menu3d.stretto{ width:230px; } .mf-menu3d.stretto .mp img{ width:30px; height:30px; } .mf-menu3d.stretto .mp{ margin:2px 0; } .mf-menu3d.stretto .mo{ padding:13px 9px; margin-top:6px; }
.vivo-pill{ position:absolute; transform:translateX(-50%); display:flex; align-items:center; gap:7px; background:var(--vetro-forte); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; border:0; border-radius:99px; padding:9px 14px; font:700 13.5px/1.1 var(--f-ui); white-space:nowrap; box-shadow:inset 0 0 0 1px var(--filo), 0 8px 24px rgba(0,0,0,.4); cursor:pointer; z-index:1400; }
.vivo-pill i{ width:8px; height:8px; border-radius:50%; background:var(--oro); animation:mfPulse 1.8s ease-out infinite; } .vivo-pill b{ color:var(--oro); } .vivo-pill.no{ opacity:.75; } .vivo-pill.no i{ background:#777; animation:none; }
.mf-moduli{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin:10px 0; } .mf-moduli > *{ min-width:0; } .mf-moduli:empty{ display:none; }

/* ═══ GRATIFICAZIONE: lampo d'oro, particelle, biglietto che si posa nello Zaino ═══ */
@keyframes mfOro{ 0%{ opacity:0; } 25%{ opacity:1; } 100%{ opacity:0; } }
#lampo-oro{ position:fixed; inset:0; z-index:70; pointer-events:none; background:radial-gradient(80% 60% at 50% 55%,rgba(255,244,214,.9),rgba(201,153,26,.55) 50%,transparent 80%); opacity:0; } #lampo-oro.on{ animation:mfOro .4s ease-out both; }
@keyframes mfParticella{ from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--dx),-70vh) scale(.2); opacity:0; } }
.particella{ position:fixed; left:50%; top:60%; width:8px; height:8px; border-radius:50%; background:var(--luce); box-shadow:0 0 10px 2px rgba(255,244,214,.8); z-index:71; pointer-events:none; animation:mfParticella 1.3s cubic-bezier(.2,.6,.3,1) both; }
@keyframes mfVola{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:1; } 70%{ opacity:1; } 100%{ transform:translate(calc(-50% + var(--vx)),calc(-50% + var(--vy))) scale(.12) rotate(-12deg); opacity:0; } }
.vola{ position:fixed; left:50%; top:50%; width:132px; height:76px; border-radius:12px; background:linear-gradient(135deg,#E2B33A,var(--oro)); color:var(--oro-ink); z-index:72; pointer-events:none; display:grid; place-items:center; font:900 20px var(--f-display); letter-spacing:.08em; -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat; mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat; box-shadow:0 16px 40px rgba(201,153,26,.5); animation:mfVola .75s cubic-bezier(.4,0,.2,1) .35s both; }

/* ═══ moduli AZIONI e INSIEME: stessa pelle di vetro, senza toccare i moduli ═══ */
#sheet .az-cont{ margin:4px 0 8px; } #sheet .az-sk{ height:66px; }
#sheet .az-main{ background:var(--oro); color:var(--oro-ink); box-shadow:0 12px 34px rgba(201,153,26,.28); border-radius:18px; padding:14px 14px 14px 16px; margin:4px 0 6px; }
#sheet .az-main small{ color:rgba(26,19,0,.7); } #sheet .az-main .az-go{ color:var(--oro-ink); } #sheet .az-main.lampo{ background:linear-gradient(135deg,#E0B030,var(--oro)); box-shadow:0 12px 34px rgba(201,153,26,.4); }
#sheet .az-chips{ gap:8px; padding:2px 0 4px; } #sheet .az-chips .chip{ background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); }
#sheet .az-asta, #sheet .az-lampo, #sheet .az-card, #sheet .az-tessera{ background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); border:0; border-radius:var(--r); }
#sheet .az-asta small, #sheet .az-card small, #sheet .az-lampo small{ color:var(--muto); } #sheet .az-prezzo{ font-family:var(--f-display); color:var(--oro); }
#sheet .az-gruppo{ background:var(--vetro-chiaro); border:0; box-shadow:inset 0 0 0 1px var(--filo); color:#fff; } #sheet .az-gruppo.ok{ box-shadow:inset 0 0 0 1.5px rgba(43,211,138,.6); }
#sheet .az-conta, #sheet .az-conta b{ color:#fff; font-family:var(--f-display); } #sheet .az-gruppo .az-barra{ background:rgba(255,255,255,.12); } #sheet .az-gruppo .az-barra i{ background:var(--verde); } #sheet .az-barra i{ background:var(--oro); }
#sheet .az-prezzi b{ color:#fff; } #sheet .az-stato{ color:var(--oro); }
#sheet .az-voce, #sheet .az-lista > *, #sheet .az-modi > *, #sheet .az-timbro{ background:var(--vetro-chiaro); color:#fff; border-color:transparent; box-shadow:inset 0 0 0 1px var(--filo); } #sheet .az-voce.on{ box-shadow:inset 0 0 0 2px var(--oro); }
#sheet .az-timbro.on{ background:var(--oro); color:var(--oro-ink); } #sheet .az-stelle button{ color:rgba(255,255,255,.3); } #sheet .az-stelle button.on{ color:var(--oro); }
#sheet .az-msg{ color:var(--muto); }
#sheet .ins-box{ margin:12px 0 6px; } #sheet .ins-sk{ background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05)); background-size:200% 100%; }
#sheet .ins-card{ background:var(--vetro-chiaro); border:0; box-shadow:inset 0 0 0 1px var(--filo); color:#fff; } #sheet .ins-card.on{ background:rgba(201,153,26,.12); box-shadow:inset 0 0 0 1px rgba(201,153,26,.6); }
#sheet .ins-card b, #sheet .ins-card.on b{ color:#fff; font-family:var(--f-display); } #sheet .ins-card small, #sheet .ins-card.on small{ color:var(--muto); }
#sheet .ins-ora{ color:var(--oro); text-transform:none; letter-spacing:0; } #sheet .ins-ora i{ background:var(--oro); }
#sheet .ins-big{ background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); border-radius:16px; } #sheet .ins-big.oro{ background:var(--oro); color:var(--oro-ink); box-shadow:0 12px 34px rgba(201,153,26,.28); }
#sheet .ins-poi-i, #sheet .ins-via, #sheet .ins-chip, #sheet .ins-k, #sheet .ins-audio{ background:var(--vetro-chiaro); color:#fff; border-color:transparent; box-shadow:inset 0 0 0 1px var(--filo); } #sheet .ins-via.on{ box-shadow:inset 0 0 0 2px var(--oro); }
#sheet .ins-poi-i small, #sheet .ins-sub, #sheet .ins-msg{ color:var(--muto); }

/* ═══ v0.41 · rifiniture della scheda, del biglietto e dei moduli ═══ */
#sheet .foto{ margin:2px 0 0; }
#sheet .foto + h2{ margin-top:16px; }
.scorri{ display:flex; justify-content:space-between; margin:14px 2px 0; color:var(--muto); font:600 12px var(--f-ui); opacity:.75; }
/* un solo pulsante grande in oro: se il modulo AZIONI ha messo il suo, i pulsanti del piede diventano chip */
#sheet:has(.az-main) .sh-foot .btnf.oro{ flex:1 1 auto; width:auto; background:var(--vetro-chiaro); color:#fff; box-shadow:inset 0 0 0 1px var(--filo); padding:12px 16px; font-size:15px; border-radius:99px; }
.sh-foot{ flex-wrap:wrap; } .sh-foot .btnf.g, #sheet:has(.az-main) .sh-foot .btnf{ flex:1 1 auto; }
#sheet .az-main{ justify-content:center; text-align:center; min-height:58px; }
#sheet .az-main .az-ic, #sheet .az-main .az-go{ display:none; }
#sheet .az-main .az-tx{ align-items:center; } #sheet .az-main b{ font:700 17px/1.15 var(--f-ui); } #sheet .az-main small{ font:600 12.5px var(--f-ui); }
#sheet .az-chips{ flex-wrap:nowrap; }
#sheet .az-chips .chip{ padding:9px 13px; font:700 13px var(--f-ui); }
.card.ordine b{ display:block; font:700 13px var(--f-ui); color:var(--muto); margin-bottom:6px; } .card.ordine .rg{ padding:3px 0; font:600 15px var(--f-ui); } .card.ordine .tot{ margin-top:8px; padding-top:8px; border-top:1px solid var(--filo); font:700 15px var(--f-ui); }
.pv-ok{ display:inline-flex; align-items:center; gap:7px; } .pv-ok::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.biglietto .cod{ margin-top:2px; }
.paga .tipo{ padding:16px 18px; }
.fc-a .btnf.g{ flex:1 1 auto; }
#feed .foto{ aspect-ratio:4/5; }
#feed .foto video, #feed .foto img{ object-fit:cover; }
.particella{ top:62%; }
@media (prefers-reduced-motion: reduce){ .onda, .particella, .vola{ display:none; } .board.accendi{ animation-duration:.2s; } }
.foto.vuota{ aspect-ratio:auto!important; height:88px; background:radial-gradient(120% 160% at 15% 0%,rgba(255,244,214,.20),transparent 55%),radial-gradient(90% 120% at 100% 100%,rgba(201,153,26,.14),transparent 60%),#0b0f1a; box-shadow:none; }

/* ═══ v0.41 FACCIATE · formati, luce sul mondo, insegne sui tetti ═══ */
/* livello delle luci: sotto lo stage, NON è un contesto di impilamento, così l'alone si fonde con la fotocamera (screen) */
#luci{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
#luci .alone, #luci .terra{ position:absolute; left:0; top:0; display:block; mix-blend-mode:screen; pointer-events:none; will-change:transform,opacity; }
#luci .alone{ border-radius:50%; background:radial-gradient(closest-side,var(--c,rgba(255,220,140,.55)) 0%,var(--c,rgba(255,220,140,.55)) 22%,transparent 100%); }
#luci .terra{ background:linear-gradient(180deg,var(--c,rgba(255,220,140,.55)) 0%,transparent 92%); -webkit-mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent); mask:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent); filter:blur(3px); }
/* insegne sulla linea dei tetti (contro-sviluppo per gli schermi lontani): un filo di luce del colore dello schermo */
.insegna{ position:absolute; left:0; top:0; z-index:1; pointer-events:none; }
.insegna i{ display:block; width:var(--w,10px); height:calc(var(--w,10px)*.45 + 3px); border-radius:2px; background:linear-gradient(180deg,#fff,var(--c,rgba(255,220,140,.9))); box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 8px 2px var(--c,rgba(255,220,140,.55)), 0 0 22px 8px var(--c,rgba(255,220,140,.35)); }
.insegna span{ position:absolute; left:50%; bottom:11px; transform:translateX(-50%); white-space:nowrap; font:700 11px/1 var(--f-ui); color:#fff; padding:4px 8px; border-radius:99px; background:rgba(8,12,24,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.insegna span:empty{ display:none; }
/* ticker LED: banda sottile, testo che scorre */
.board.fmt-ticker .tit, .board.fmt-ticker .dalvivo{ display:none; }
.board .ticker{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; overflow:hidden; background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(5,7,13,.7)); pointer-events:none; }
.board .ticker span{ display:inline-block; white-space:pre; padding-left:8px; font:800 19px/1 var(--f-ui); color:var(--luce); text-shadow:0 0 8px rgba(255,236,190,.7); animation:mfTicker 16s linear infinite; }
@keyframes mfTicker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* verticale alto: titolo più stretto e su due righe */
.board.fmt-verticale .tit b{ white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
/* angolo avvolgente: due pannelli che girano lo spigolo */
.board.fmt-angolo{ background:transparent; border:0; box-shadow:none; overflow:visible; } .board.fmt-angolo::after, .board.fmt-angolo::before{ display:none; }
.board.fmt-angolo .piega canvas.fc{ outline:4px solid var(--led); outline-offset:-4px; }
@media (prefers-reduced-motion: reduce){ .board .ticker span{ animation:none; } }
.board.piccolo .tit, .board.piccolo .dalvivo{ display:none; }
.board:not(.primo) .tit small{ display:none; } .board:not(.primo) .tit{ padding-bottom:14px; }

/* ═════ v0.42 · SCHERMI: trattamento LED, pareti, Ken Burns, scatto LED fra slide ═════
   Una creatività LED è scura per natura (fondo nero, soggetto in primo piano): su uno schermo vero la luce la fa il pannello.
   Giorno: brightness ~1.2, saturate ~1.3, contrast 1.05; sera (--sera → 1): più luce, più colore, bagliore largo, alone sul selciato.
   I valori stanno in variabili (--sb, --ss, --sc) scritte da resa(): il CSS non conosce l'ora. */
.board canvas.fc, .board video.vid, .board .loop{ filter:blur(var(--sf,0px)) saturate(var(--ss,1.3)) brightness(var(--sb,1.2)) contrast(var(--sc,1.05)); }
.board{ box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 7px 1px var(--riverbero,rgba(255,220,140,.45)), 0 0 calc(34px + 46px*var(--sera,0)) calc(3px + 11px*var(--sera,0)) var(--riverbero,rgba(255,220,140,.42)), 0 0 calc(90px*var(--sera,0)) calc(26px*var(--sera,0)) var(--riverbero,rgba(255,220,140,.3)), 0 22px 50px rgba(0,0,0,.4); }
.board::after{ background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,0) 34%),radial-gradient(120% 90% at 50% 120%,rgba(255,255,255,.06),transparent 60%); mix-blend-mode:screen; }
.board .loop{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:2px; opacity:0; transition:opacity .45s var(--ease); background:#000; }
.board .loop.on{ opacity:1; }
/* Ken Burns lento: parte a ogni slide (la tela nuova nasce in DOM), origine diversa a rotazione */
.board canvas.fc{ transform-origin:var(--kbo,50% 50%); animation:mfKB 7s cubic-bezier(.3,.1,.3,1) both; }
@keyframes mfKB{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.board .piega canvas.fc{ animation:none; }
/* scatto LED fra due slide: la nuova scopre la vecchia a quadrettoni (steps) con un lampo di luce; la vecchia resta sotto */
.board canvas.fc.entra, .pt b{ animation-name:mfKB,mfLed; animation-duration:7s,.7s; animation-timing-function:cubic-bezier(.3,.1,.3,1),steps(12,end); animation-fill-mode:both,backwards; }
.board canvas.fc.esce{ position:absolute; inset:0; z-index:0; animation:none; }
.board canvas.fc.entra{ position:relative; z-index:1; }
@keyframes mfLed{ 0%{ clip-path:inset(0 100% 0 0); filter:brightness(2.4) saturate(.5); } 100%{ clip-path:inset(0 0 0 0); filter:brightness(1.2); } }
/* pareti: gli schermi lontani a contatto, come un muro LED */
.parete{ position:absolute; left:50%; top:50%; display:grid; grid-template-columns:repeat(var(--cols,3),var(--tw,80px)); grid-auto-rows:var(--th,45px); gap:3px; justify-content:center; align-content:center; padding:3px; background:var(--led); border-radius:3px; cursor:pointer; will-change:transform; transform-origin:center; backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 8px 1px var(--riverbero,rgba(255,220,140,.45)), 0 0 calc(30px + 40px*var(--sera,0)) calc(3px + 9px*var(--sera,0)) var(--riverbero,rgba(255,220,140,.4)), 0 0 calc(80px*var(--sera,0)) calc(20px*var(--sera,0)) var(--riverbero,rgba(255,220,140,.28)); }
.parete.spento{ filter:brightness(.04); }
.parete.accendi{ animation:mfAccendi .85s cubic-bezier(.2,.7,.2,1) both; }
.parete .pt{ position:relative; overflow:hidden; background:linear-gradient(135deg,#0d1530,#1a2548); border-radius:1px; }
.parete .pt::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 3px); }
.parete .pt.vuota::before{ content:attr(data-nome); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6%; text-align:center; font:700 clamp(8px,calc(var(--th,45px)*.2),15px)/1.1 system-ui,sans-serif; letter-spacing:.02em; color:#F5E9D0; background:radial-gradient(120% 90% at 30% 20%,#2a3a6e,#0d1530 70%); text-shadow:0 0 6px rgba(255,214,140,.55); overflow:hidden; }
.parete .pt b{ position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(var(--sf,0px)) saturate(var(--ss,1.3)) brightness(var(--sb,1.2)) contrast(var(--sc,1.05)); }
@media (prefers-reduced-motion: reduce){ .board canvas.fc, .pt b, .board canvas.fc.entra{ animation:none; } }
#luci .pozza{ position:absolute; left:0; top:0; display:block; border-radius:50%; mix-blend-mode:screen; pointer-events:none; will-change:transform,opacity; background:radial-gradient(closest-side,var(--c,rgba(255,220,140,.55)) 0%,transparent 100%); filter:blur(5px); }
/* v0.42 · HUD onesto su due righe: la via sopra, sotto quanti schermi hai davanti e quanto è vicino il primo */
#hud{ flex-direction:column; align-items:center; gap:2px; padding:8px 18px 9px; border-radius:22px; max-width:94vw; }
#hud b{ font:700 12px/1.1 var(--f-ui); color:var(--muto); max-width:80vw; }
#hud-s{ color:var(--ink); font:700 14px/1.15 var(--f-ui); max-width:86vw; overflow:hidden; text-overflow:ellipsis; }

/* v0.42 rifinitura · con un foglio aperto la pill in alto si spegne (niente testo tagliato a metà dietro il foglio) */
#hud{ transition:opacity .22s var(--ease); } body.foglio #hud{ opacity:0; pointer-events:none; }
/* dissolvenza sotto il contenuto che scorre, sopra il pulsante in fondo: niente righe tagliate di netto */
#sheet .sh-foot{ position:relative; } #sheet .sh-foot::before{ content:''; position:absolute; left:0; right:0; top:-24px; height:24px; pointer-events:none; background:linear-gradient(rgba(8,12,24,0), rgba(8,12,24,.88)); } #sheet .sh-foot:empty::before{ display:none; }

/* v0.45 · al chiuso */
#chiuso{ position:fixed; left:16px; right:16px; top:calc(var(--safeT,0px) + 120px); z-index:30; display:none; flex-direction:column; gap:6px; padding:16px 18px; border-radius:22px; background:rgba(8,12,24,.84); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); color:#fff; font:500 15px/1.35 var(--f-ui,system-ui); text-align:center; }
#chiuso.on{ display:flex; }
#chiuso b{ font:700 18px var(--f-ui,system-ui); }
#chiuso span{ opacity:.82; }
#chiuso div{ display:flex; gap:10px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
#chiuso button{ min-height:44px; padding:0 18px; border:0; border-radius:22px; background:#C9991A; color:#07122B; font:700 15px var(--f-ui,system-ui); }
#chiuso button.g{ background:rgba(255,255,255,.14); color:#fff; }

/* v0.47 · pulsante vista chiara/piena nell'HUD */
#b-vista{ margin-left:6px; min-height:28px; padding:0 10px; border:1px solid rgba(255,255,255,.25); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; font:600 12px var(--f-ui,system-ui); }