/* ════════════════════════════════════════════════════════════════════════════
   GOCREW — brand.css: il design system dell'ecosistema ("stesso canale").
   Token e componenti ESTRATTI dalla radio (styles.css): ogni superficie nuova
   (home, sessions, …) nasce da qui; radio e admin migreranno a questi token.
   Niente framework: CSS puro, come tutto il progetto.
   ════════════════════════════════════════════════════════════════════════════ */

/* ══ TOKENS — blocco CONDIVISO: la fonte e' site/tokens.css e questo blocco va tenuto
   IDENTICO in site/brand.css e radio/styles.css (la CI lo verifica). Colori, font e
   misure dell'ecosistema: nel CSS si scrive var(--…), mai il valore a mano. ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #080808;
  --surface: #101010;
  --surface2: #181818;
  --border: #222;
  --accent: #39ff6e;
  --red: #ff2e4d;
  --night: #6b4fff;
  --text: #efefef;
  --muted: #8a8a8a;   /* 5,8:1 sul fondo: il secondario resta leggibile (era #555 = 2,7:1) */
  --pixel: 'Press Start 2P', monospace;
  --mono: 'Space Mono', monospace;
  --sans: 'Syne', sans-serif;
  /* difficolta' (gemelle di DIFF_COLOR in radio/shared.js e di theme.ts nell'app) */
  --diff-easy: #39ff6e; --diff-normal: #4fd2ff; --diff-hard: #ffb13c; --diff-veryhard: #ff3b6b;
}
/* ══ FINE TOKENS ══ */
html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }

/* ── CRT leggero (canale acceso, ma senza affaticare) ── */
.crt-scan::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.10) 2px, rgba(0,0,0,.10) 3px);
}
.crt-scan::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: radial-gradient(ellipse 130% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.45) 100%);
}

/* ── PILLOLA ON AIR (pallino = elemento grafico: Press Start 2P non ha il "●") ── */
.onair {
  background: var(--red); color: #fff; font-family: var(--pixel); font-size: 8px;
  letter-spacing: .12em; padding: 4px 8px; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 6px;
}
.onair::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; flex: 0 0 auto; }
.onair.night { background: var(--night); }
.onair.night::before { display: none; }

/* ── ASCOLTATORI (cuore pixel + numero) ── */
.listeners { font-family: var(--pixel); font-size: 10px; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.listeners svg { width: 15px; height: auto; display: block; }

/* ── BARRA LINK (stile linktree, in pixel) ── */
.link-bar {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 16px 18px; text-decoration: none; color: var(--text);
  transition: border-color .15s, background .15s, transform .12s;
}
.link-bar:hover { border-color: var(--accent); background: var(--surface2); transform: translateY(-1px); }
.link-bar .lb-ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); }
.link-bar .lb-ico svg { width: 100%; height: 100%; display: block; }
.link-bar .lb-txt { flex: 1; min-width: 0; }
.link-bar .lb-title { display: block; font-family: var(--pixel); font-size: 11px; line-height: 1.7; }
.link-bar .lb-sub { display: block; font-family: var(--mono); font-size: 14px; color: var(--muted); margin-top: 2px; }
.link-bar .lb-arrow { flex: 0 0 auto; font-family: var(--mono); color: var(--muted); transition: color .15s, transform .15s; }
.link-bar:hover .lb-arrow { color: var(--accent); transform: translateX(3px); }
.link-bar.soon { opacity: .55; cursor: var(--cur-freccia, default); }
.link-bar.soon:hover { border-color: var(--border); background: var(--surface); transform: none; }
.link-bar.soon:hover .lb-arrow { color: var(--muted); transform: none; }

/* ── CARD (superficie generica) ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }

/* ── BOTTONE PIXEL (CTA compatta: eventi, e ovunque serva un'azione primaria) ── */
.btn-pixel {
  display: inline-block; font-family: var(--pixel); font-size: 9px; line-height: 1.6;
  letter-spacing: .08em; padding: 10px 14px; border-radius: 3px;
  background: var(--accent); color: #000; text-decoration: none;
  transition: transform .12s;
}
.btn-pixel:hover { transform: translateY(-1px); }
.btn-pixel.soon { background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: var(--cur-freccia, default); }
.btn-pixel.soon:hover { transform: none; }

/* ── EVENTO FUTURO (.fc.solo): 4:5 della stessa famiglia .fc, vetrina sola
   (niente flip). Fronte = copertina o piastra COMING SOON; data, titolo,
   luogo/lineup e CTA sull'overlay. Vive sulla timeline come gli altri. ── */
.fc.solo { position: relative; cursor: var(--cur-freccia, default); }
.fc-coming {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--pixel); font-size: 14px; letter-spacing: .14em; color: var(--accent);
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 16px, #141414 16px, #141414 32px);
  animation: coming-pulse 2.4s ease-in-out infinite;
}
@keyframes coming-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .fc-coming { animation: none; } }
.fc-line { font-family: var(--mono); font-size: 15px; color: rgba(255,255,255,.78); margin-top: 5px; }
.fc-line a { color: inherit; }
.fc-line a:hover { color: var(--accent); }
/* modale sketch: player NATIVO (mp4 nostro) + ponte verso Instagram */
.ev-lb-video { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* gabbia 9:16 da SUBITO (i nostri sketch/recap IG sono verticali): senza,
   prima dei metadati il video apriva 16:9 e poi scattava in verticale */
.ev-lb-video video { width: min(420px, 92vw, 44vh); aspect-ratio: 9 / 16; max-height: 78vh; object-fit: contain; border: 1px solid var(--border); border-radius: 12px; background: #000; display: block; }
.ev-lb-ig { text-align: center; }
/* fallback: embed IG (solo se manca l'mp4) */
.ev-lb-embed { width: min(360px, 92vw); height: min(620px, 88vh); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #000; }
.ev-lb-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.ev-badge { display: inline-block; font-family: var(--pixel); font-size: 9px; padding: 5px 9px; border-radius: 2px; margin-left: 12px; vertical-align: middle; }
.ev-badge.alert { background: var(--red); color: #fff; }
.ev-badge.libero { border: 1px solid var(--accent); color: var(--accent); }
/* carosello 3D foto (facce costruite dal JS della pagina eventi) */
.ev-car { --ev-car-w: 270px; --ev-car-h: 360px; margin-top: 16px; }
.ev-car-stage {
  position: relative; height: calc(var(--ev-car-h) + 30px);
  perspective: 1200px; overflow: hidden; cursor: grab;
  touch-action: pan-y;   /* drag orizzontale nostro, scroll verticale del browser */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ev-car-stage:active { cursor: grabbing; }
.ev-car-ring { position: absolute; inset: 0; transform-style: preserve-3d; }
.ev-car-face {
  position: absolute; left: 50%; top: 15px;
  width: var(--ev-car-w); height: var(--ev-car-h);
  margin-left: calc(var(--ev-car-w) / -2);
  border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--surface); backface-visibility: hidden;
}
.ev-car-face img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* la FACCIA si dimensiona sul formato della foto (JS al load):
     niente bande nere e niente tagli — cover qui è solo il transitorio */
  user-select: none; -webkit-user-drag: none;
}
.ev-car-face::after {   /* velatura gradiente: lega le foto al canale */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(57,255,110,.05), transparent 30%, transparent 55%, rgba(0,0,0,.5));
}
.ev-car-count { font-family: var(--mono); font-size: 15px; color: var(--muted); text-align: center; margin-top: 6px; }
/* ── ANELLO 3D DELL'ARCHIVIO: la timeline È il nastro — card evento 4:5 e
   marcatori dei mesi ruotano attorno a un anello (geometria in eventi.js).
   Drag/rotella/frecce muovono il tempo; click sulla card centrata = il nodo
   si APRE: i satelliti escono nel layer .ring-open, il resto in penombra. ── */
.ring { position: relative; height: calc(100dvh - 90px); min-height: 540px; outline: none; }
.ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* clip e non hidden: hidden resta SCROLLABILE da focus/frammenti (l'hash del
   deep-link lo scrollava di ~258px spostando tutto l'anello); clip no */
.ring-stage { position: absolute; inset: 0; overflow: hidden; overflow: clip; perspective: 1400px; cursor: grab; touch-action: pan-y; }
.ring-stage:active { cursor: grabbing; }
/* la linea del tempo: tratteggiata orizzontale dietro le card */
.ring-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(57,255,110,.22); }
/* il nastro nasce INVISIBILE: prima del primo layout() gli slot sono una pila
   nuda al centro (card nera storta per un attimo) — appare a geometria pronta */
.ring-belt { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; opacity: 0; }
.ring.pronto .ring-belt { opacity: 1; transition: opacity .3s; }
.ring-slot { position: absolute; left: 0; top: 0; will-change: transform; transition: filter .35s; }
.ring-slot.mese { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ring-sats { display: none; }   /* i satelliti vivono nel layer .ring-open, solo da aperti */

/* marcatore di un mese SENZA eventi + etichette dei mesi (riusate ovunque) */
.tl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .65; }
.tl-month.tiny { font-family: var(--mono); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .06em; white-space: nowrap; }
.tl-month.main { display: inline-block; font-family: var(--pixel); font-size: 12px; color: var(--accent);
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 6px 11px; white-space: nowrap; }

/* testata del NODO: mese + TITOLO sopra la card */
.rs-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; text-align: center; }
.rs-tit { font-family: var(--pixel); font-size: clamp(15px, 2.1vw, 24px); line-height: 1.45; color: #fff; }

/* frecce ai lati (desktop) + riga di istruzioni */
.ring-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: rgba(0,0,0,.55); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 22px; line-height: 1; }
.ring-nav:hover { border-color: var(--accent); color: var(--accent); }
.ring-nav.prev { left: 10px; }
.ring-nav.next { right: 10px; }
.ring-hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-family: var(--mono); font-size: 14px; color: var(--muted); pointer-events: none; transition: opacity .25s; }
.ring.aperto .ring-hint { opacity: 0; }   /* a nodo aperto comandano i satelliti */

/* nodo aperto: layer fisso coi satelliti attorno alla card centrata */
.ring.aperto .ring-stage { cursor: var(--cur-freccia, default); }
@keyframes ro-scroll { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (prefers-reduced-motion: reduce) { .ro-scroll { animation: none; } }
.ring-open { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
/* i due LATI del nodo aperto: titolo di sezione (stesso chip dei mesi) + pannello */
.ring-open .ro-side { position: absolute; top: calc(50% + var(--ro-top, 0px)); transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 16px; pointer-events: none; }   /* --ro-top: centro dell'anello, lo scrive eventi.js */
.ring-open .ro-side[hidden] { display: none; }   /* il display:flex sopra batterebbe l'attributo hidden */
.ring-open .ro-side > * { pointer-events: auto; }
/* --ro-off = mezza card + 32px, lo scrive eventi.js: i pannelli seguono la taglia della card */
.ring-open .ro-side.a { right: calc(50% + var(--ro-off, 252px)); align-items: flex-end; }
.ring-open .ro-side.b { left: calc(50% + var(--ro-off, 252px)); align-items: flex-start; }
.ring-open .ro-side .tl-month.main { opacity: 0; transition: opacity .35s; }
.ring-open.on .ro-side .tl-month.main { opacity: 1; }
.ring-open .ro-pan { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; align-content: center;
  overflow: visible; }   /* niente scroll: le scale dell'hover farebbero comparire le barre */
.ring-open .ro-pan.a { justify-content: flex-end; max-width: 440px; }
.ring-open .ro-pan.b { justify-content: flex-start; max-width: 480px; }
/* i satelliti ESCONO da dietro la card: scivolata morbida verso i lati,
   leggermente sfalsata (mentre la card gira sulle foto) */
.ring-open .fc-sat { opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.ring-open .ro-pan.a .fc-sat { transform: translateX(90px) scale(.85); }
.ring-open .ro-pan.b .fc-sat { transform: translateX(-90px) scale(.85); }
.ring-open .ro-pan .fc-sat:nth-child(2) { transition-delay: .07s; }
.ring-open .ro-pan .fc-sat:nth-child(3) { transition-delay: .14s; }
.ring-open .ro-pan .fc-sat:nth-child(n+4) { transition-delay: .2s; }
.ring-open.on .fc-sat, .ring-open.on .ro-pan.a .fc-sat, .ring-open.on .ro-pan.b .fc-sat { opacity: 1; transform: none; }
/* DESKTOP, nodo aperto: FUOCO col mouse — il satellite hoverato (sketch o
   locandine) cresce, la card e gli altri satelliti si ritirano. Va DOPO le
   regole .on (stessa specificità: qui vince l'ordine). */
.ring-open.on .ro-pan .fc-sat:hover { transform: scale(1.3); z-index: 2; }
.ring-open.on:has(.ro-pan .fc-sat:hover) .ro-pan .fc-sat:not(:hover) { transform: scale(.86); }
.ring:has(.ro-pan .fc-sat:hover) .ring-slot.open .fc { transform: scale(.9); }
.ring-slot.open .fc { transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.ring-close { position: absolute; top: 16px; right: 16px; pointer-events: auto; cursor: var(--cur-mano, pointer);
  font-family: var(--pixel); font-size: 9px; letter-spacing: .08em; padding: 10px 14px; border-radius: 3px;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.35); color: #fff; }
.ring-close:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 760px) {
  .ring { height: calc(100dvh - 60px); min-height: 480px; }
  .ring-nav { display: none; }   /* si naviga a swipe */
  /* nodo aperto = VIEWER A PAGINE impilate al centro (snap verticale):
     card più larga in cima (girata sulle foto), uno scroll → sketch,
     un altro → locandine. La card e i satelliti si spostano qui (JS .paged). */
  .ring-open.paged { pointer-events: auto; background: rgba(8, 8, 8, .95);
    overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
  .ring-open.paged .ro-side { display: none; }   /* i pannelli laterali sono roba desktop */
  .ro-page { position: relative; height: 100dvh; display: flex; align-items: center; justify-content: center;
    scroll-snap-align: start; scroll-snap-stop: always; }
  /* la linea del tempo CONTINUA in verticale dentro il viewer: una tratteggiata
     per pagina, stessa x → attraversa card, sketch e locandine senza stacchi */
  .ro-page::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    border-left: 2px dashed rgba(57, 255, 110, .22); }
  .ro-page > * { position: relative; }   /* i contenuti passano SOPRA la linea */
  /* invito a scorrere: SCROLL + chevron pixel, rimbalza piano; via sull'ultima pagina */
  .ro-scroll { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-family: var(--pixel); font-size: 8px; letter-spacing: .12em; color: var(--accent);
    animation: ro-scroll 1.8s ease-in-out infinite; pointer-events: none; }
  .ro-scroll svg { width: 18px; height: auto; display: block; }
  .ro-page:last-child .ro-scroll { display: none; }
  .ro-page .fc { width: min(92vw, 430px); }
  .ro-page .fc-sat { opacity: 1; transform: none; transition: none; }
  .ro-page .fc-sat.sat-sk { width: min(80vw, 46dvh); }
  .ro-page .fc-sat.sat-loc { width: min(88vw, 62dvh); }
  .ring-close { position: fixed; top: 10px; right: 10px; }   /* resta lì mentre il viewer scorre */
}

/* le CARD SATELLITE: mini-card che mostrano un contenuto solo */
.fc-sat { position: relative; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; background: #000; cursor: var(--cur-mano, pointer); transition: border-color .15s, transform .15s; }
.fc-sat:hover { border-color: var(--accent); }
.sat-sk { width: 200px; aspect-ratio: 9 / 16; }
.sat-loc { width: 230px; aspect-ratio: 4 / 5; }
.fc-sat video, .fc-sat .fc-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.sat-sk video { object-fit: cover; }
.fc-sat .fc-cover { background: #000; }
.fc-sat .fc-cover img { width: 100%; height: 100%; object-fit: cover; }
.fc-sat .fc-cover video { object-fit: contain; }   /* locandina video 9:16 intera, bande ai lati */
.fc-sat-tag { position: absolute; bottom: 8px; left: 8px; z-index: 3; font-family: var(--pixel); font-size: 8px; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.3); border-radius: 2px; padding: 5px 7px; }
.sat-sk::after { content: '▶'; position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--accent); text-shadow: 0 0 12px rgba(0,0,0,.9); pointer-events: none; }

.fc { aspect-ratio: 4 / 5; perspective: 1100px; cursor: var(--cur-mano, pointer); outline: none; }   /* formato post Instagram: taglia meno le locandine */
.fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2, .7, .3, 1); }
/* inclinazione d'invito SOLO col mouse vero: su touch l'hover resta
   "appiccicato" dopo il tap e la card rimaneva storta */
@media (hover: hover) { .fc:hover .fc-inner { transform: rotateY(10deg); } }
.fc.flip .fc-inner, .fc.flip:hover .fc-inner { transform: rotateY(180deg); }
.fc:focus-visible .fc-inner { outline: 2px solid var(--accent); outline-offset: 3px; }
.fc-front, .fc-back {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 14px; border: 1px solid var(--border); overflow: hidden;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
/* le facce si SCAMBIANO a 90° (metà del giro da .55s): su mobile il solo
   backface-visibility lasciava leggere il titolo del fronte specchiato */
.fc-front { transition: visibility 0s .27s; }
.fc-back { visibility: hidden; transition: visibility 0s .27s; }
.fc.flip .fc-front { visibility: hidden; }
.fc.flip .fc-back { visibility: visible; }
.fc-front { background-color: var(--surface); justify-content: flex-end; }
/* browser di COPERTINE: immagini a tutta card, VIDEO 9:16 interi (bande ai lati) */
.fc-cover { position: absolute; inset: 0; z-index: 0; background: #000; }
.fc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-cover video { width: 100%; height: 100%; object-fit: contain; display: block; }
.fc-front::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 35%, transparent 55%, rgba(0,0,0,.82)); pointer-events: none; }
.fc-front .fc-meta, .fc-front .fc-chips { z-index: 2; }
.fc-back { transform: rotateY(180deg); background: var(--accent); color: #000; }
.fc-meta { position: relative; }
.fc-date { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); }
.fc-back .fc-date { color: rgba(0,0,0,.65); }
.fc-title { font-family: var(--pixel); font-size: 13px; line-height: 1.6; margin-top: 4px; color: #fff; }
.fc-back .fc-title { color: #000; }
.fc-chips { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.fc-chip {
  font-family: var(--pixel); font-size: 8px; letter-spacing: .08em; cursor: var(--cur-mano, pointer);
  padding: 8px 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.55); color: #fff; transition: border-color .15s, background .15s;
}
.fc-chip:hover { border-color: var(--accent); color: var(--accent); }
.fc-back .fc-chip { background: #000; color: var(--accent); border-color: #000; }
.fc-back .fc-chip:hover { background: #111; }
/* il carosello 3D DENTRO il retro: facce a misura di card, contatore scuro */
.fc-back .ev-car { --ev-car-w: 220px; --ev-car-h: 400px; position: relative; margin: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.fc-back .ev-car-stage { flex: 0 0 auto; }
.fc-back .ev-car-count { color: rgba(0,0,0,.6); font-weight: 700; }
.fc-back .fc-chips { margin-top: auto; }
.fc-back { justify-content: flex-start; }
.fc-hint { position: absolute; top: 10px; right: 12px; font-family: var(--mono); font-size: 16px; color: rgba(255,255,255,.6); pointer-events: none; }
.fc-back .fc-hint { color: rgba(0,0,0,.5); }
/* frecce per SFOGLIARE le locandine sul fronte (non girano la card) */
.fc-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-family: var(--mono); font-size: 20px; line-height: 1;
  transition: border-color .15s, color .15s;
}
.fc-nav:hover { border-color: var(--accent); color: var(--accent); }
.fc-nav.prev { left: 12px; }
.fc-nav.next { right: 12px; }
.fc-loc-count { position: absolute; top: 12px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 14px; font-weight: 700; color: rgba(255,255,255,.85); text-shadow: 0 0 6px rgba(0,0,0,.8); }

/* variante piatta: quando le immagini sono poche (es. 1-3 locandine) niente giro 3D;
   con UNA sola immagine ("uno") si mostra grande e centrata — la locandina si VEDE */
.ev-car-flat { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ev-car-flat img { height: 300px; border-radius: 12px; border: 1px solid var(--border); flex: 0 0 auto; }
.ev-car-flat.uno { justify-content: center; }
.ev-car-flat.uno img { width: min(400px, 100%); height: auto; max-height: 460px; object-fit: contain; }
@media (max-width: 560px) {
  .ev-car { --ev-car-w: 190px; --ev-car-h: 250px; }
  /* dentro il retro card serve ribadirlo: .fc-back .ev-car è più specifico
     delle regole di questa media query e vincerebbe la taglia desktop */
  .fc-back .ev-car { --ev-car-w: 180px; --ev-car-h: 290px; }
}

/* lightbox foto (dal carosello) */
.ev-lb { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.ev-lb img { max-width: 92vw; max-height: 86vh; border: 1px solid var(--border); border-radius: 6px; }
.ev-lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: rgba(0,0,0,.5); border: 1px solid var(--border); color: var(--text);
  font-family: var(--mono); font-size: 22px; line-height: 1;
}
.ev-lb-btn:hover { border-color: var(--accent); color: var(--accent); }
.ev-lb-btn.prev { left: 14px; }
.ev-lb-btn.next { right: 14px; }
.ev-lb-btn.close { top: 14px; right: 14px; transform: none; font-size: 16px; }
.ev-lb-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 14px; color: var(--muted); }
.ev-cta { margin-top: 14px; }
@media (max-width: 560px) {
  .ev-car-flat img { height: 240px; }
  .ev-car-flat.uno img { max-height: 380px; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ PIXEL UI — blocco CONDIVISO: tenerlo IDENTICO in site/brand.css e in     ║
   ║ radio/styles.css. Lo genera scratchpad/applica-stile.js da pixelarticons ║
   ║ (MIT, Copyright (c) 2019 Gerrit Halfmann). Scelte dell'utente il 09/08.  ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── CASELLE ── Restano <input type=checkbox> VERI: appearance:none cambia solo
   il vestito, mentre TAB, barra spaziatrice, lettori di schermo e validazione
   del form restano quelli del browser. Su un consenso legale non si disegna una
   casella con un <div>.
   Da VUOTA il bordo è --muted: 5,8:1 sul fondo, misurato. La variante con bordo
   --border era a 1,26:1, cioè invisibile — provata e scartata. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: 0 0 auto; margin: 0;
  background: var(--surface2); border: 2px solid var(--muted); border-radius: 0;
  cursor: pointer; position: relative; image-rendering: pixelated;
}
input[type="checkbox"]:hover { border-color: var(--text); }
input[type="checkbox"]:checked {
  background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2018H8v-2h2v2Zm-2-2H6v-2h2v2Zm4-2v2h-2v-2h2Zm-6%200H4v-2h2v2Zm8%200h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2V8h2v2Zm2-2h-2V6h2v2Z%27%20fill%3D%27%23041007%27%2F%3E%3C%2Fsvg%3E");                     /* pixelarticons/check */
  background-size: 100% 100%; background-repeat: no-repeat;
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── BARRA DI SCORRIMENTO ── 12px: è un COMANDO, non una decorazione, e sotto i
   10px diventa difficile da afferrare col mouse. */
* { scrollbar-color: var(--accent) var(--surface2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface2); }
::-webkit-scrollbar-thumb { background: var(--accent); border: 2px solid var(--surface2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #6fff96; }
::-webkit-scrollbar-corner { background: var(--surface2); }

/* ── PUNTATORE ── 32px, il massimo accettato dai browser (a 24 sono piccoli).
   Il contorno scuro NON è decorazione: senza, il verde sparisce sul riquadro
   avorio della firma nella liberatoria.
   Le regole con classe (grab/grabbing del carosello, default sui "soon") hanno
   specificità maggiore e continuano a vincere: il cursore che INFORMA resta. */
/* La MANO sta in una VARIABILE perché in giro ci sono ~39 regole con classe
   (.send, .chat-open, .dash-widget, le card…) che dicevano già cursor:pointer e
   per specificità vincono su un selettore di elemento. Ora dicono
   cursor: var(--cur-mano, pointer): tengono la loro precedenza, ma il disegno
   arriva da qui. Il fallback copre il caso in cui questo blocco non ci sia. */
/* Tutti e tre in VARIABILE, anche il trattino: prima viveva solo dentro la regola
   dei campi di testo e non era riusabile — chi voleva il trattino altrove (un
   riquadro di sola lettura, la vetrina del design system) si ritrovava quello di
   sistema. Un disegno del canale deve essere richiamabile da un posto solo. */
:root { --cur-mano: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17%209h2v3h-2zm-4-2h2v4h-2zM9%203h2v8H9zM5%203h2v10H5zm14%206h2v2h-2zm-4-2h2v2h-2zm-4%200h2v2h-2zM7%201h2v2H7zM3%2011h2v2H3zm-2%202h2v2H1zm0%202h2v2H1zm2%202h2v2H3zm2%202h2v2H5zm2%202h12v2H7zm12-2h2v2h-2zm2-8h2v8h-2zM5%2013h2v2H5zm2%202h2v2H7z%27%20fill%3D%27%2339ff6e%27%20stroke%3D%27%23041007%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E") 7 1, pointer; --cur-freccia: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6%204h2v16H6zm2%200h2v2H8zm2%202h2v2h-2zm2%202h2v2h-2zm2%202h2v2h-2zm2%202h2v2h-2zm-8%206h2v2H8zm2-2h2v2h-2zm2-2h6v2h-6z%27%20fill%3D%27%2339ff6e%27%20stroke%3D%27%23041007%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E") 5 3, auto; --cur-testo: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%204h8v2H8zM11%206h2v12h-2zM8%2018h8v2H8z%27%20fill%3D%27%2339ff6e%27%20stroke%3D%27%23041007%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%20paint-order%3D%27stroke%27%2F%3E%3C%2Fsvg%3E") 16 16, text; }
html { cursor: var(--cur-freccia); }
a, button, label, summary, select, [role="button"],
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
  cursor: var(--cur-mano);
}
/* input:not([type]) NON è un di più: un <input> senza type È un campo di testo,
   e input[type="text"] non lo becca. Sono sei in giro (il nome e il messaggio
   della bacheca, quattro campi in regia) e restavano con la freccia. */
input:not([type]), input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="search"], input[type="password"],
input[type="number"], textarea, [contenteditable="true"] {
  cursor: var(--cur-testo);
}
/* AFFERRA: resta quello di SISTEMA, per scelta. grab/grabbing sono una COPPIA
   che racconta uno stato (puoi trascinare / stai trascinando), ed è l'unico
   punto in cui il puntatore dà un'informazione che il disegno non dà. Un pixel
   nostro qui toglierebbe informazione invece di aggiungerne. */
/* Chi non ha un puntatore (telefoni, tablet, TV) non deve pagare niente. */
@media (hover: none) {
  :root { --cur-mano: auto; }
  html, a, button, label, input, textarea, select { cursor: auto; }
}