/* ══ 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 { height: 100%; height: 100dvh; height: var(--app-height, 100dvh); background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }

/* ── RUOLI TIPOGRAFICI CONDIVISI ("stesso canale": una classe = un ruolo) ──
   Titolo brano in lista → .t-song (pixel) · Nome artista → .t-artist (mono bold).
   UNICA fonte: i contesti (.qi-*, .sp-*, …) aggiungono SOLO layout
   (ellipsis, margini, marquee), mai font/taglie/colori propri. */
.t-song { font-family: var(--pixel); font-size: 10px; font-weight: 400; line-height: 1.7; }
.t-artist { font-family: var(--mono); font-weight: 700; font-size: 14.5px; color: var(--muted); line-height: 1.45; }

/* ── CRT EFFECT ── */
/* scanlines + sfarfallio */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 3px);
  animation: flicker 0.15s infinite;
}
@keyframes flicker {
  0% { opacity: 0.92; } 50% { opacity: 1; } 100% { opacity: 0.95; }
}

/* vignettatura + curvatura schermo + bagliore */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background:
    radial-gradient(ellipse 130% 120% at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 90%, rgba(0,0,0,0.7) 100%);
  box-shadow: inset 0 0 180px rgba(0,0,0,0.55);
}

/* banda luminosa che scorre (rolling bar TV) — durata randomizzata via JS */
.crt-roll {
  content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0) 45%);
  height: 32%;
}
@keyframes roll {
  0% { transform: translateY(-110%); } 100% { transform: translateY(420%); }
}

/* distorsione: aberrazione cromatica + jitter orizzontale costante leggero */
.player-area {
  text-shadow: 1px 0 0 rgba(255,0,0,0.35), -1px 0 0 rgba(0,255,255,0.35);
  animation: jitter 3.5s steps(60) infinite;
}
@keyframes jitter {
  0%,100% { transform: translateX(0); }
  47% { transform: translateX(0); }
  48% { transform: translateX(-0.6px); }
  49% { transform: translateX(0.6px); }
  50% { transform: translateX(0); }
}

/* glitch occasionale: scatto orizzontale brusco + sfasamento colore.
   Attivato a intervalli random via JS aggiungendo .glitch al player-wrap */
.player-wrap.glitch #yt {
  animation: glitchShift 0.35s steps(2) 1;
}
@keyframes glitchShift {
  0%   { transform: translateX(0); filter: none; }
  20%  { transform: translateX(-6px); filter: hue-rotate(40deg) saturate(2); }
  40%  { transform: translateX(5px) skewX(-2deg); }
  60%  { transform: translateX(-3px); filter: hue-rotate(-30deg); }
  80%  { transform: translateX(2px) skewX(1deg); }
  100% { transform: translateX(0); filter: none; }
}
/* riga di tearing che appare durante il glitch */
.player-wrap.glitch::after {
  content: ''; position: absolute; left: 0; right: 0; z-index: 7;
  top: var(--tear, 40%); height: 8px;
  background: rgba(255,255,255,0.5); mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── TRANSIZIONI CAMBIO CANALE ── */
.transition {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; background: #000;
}
.transition.show { opacity: 1; }

/* rumore statico TV */
.tv-static {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px;
  animation: staticmove 0.12s steps(3) infinite;
}
@keyframes staticmove {
  0%{background-position:0 0} 33%{background-position:60px -40px} 66%{background-position:-30px 50px} 100%{background-position:20px 10px}
}

/* linea orizzontale di scansione (cambio canale brusco) */
.tv-hsync {
  position: absolute; left: 0; right: 0; height: 40%; top: 30%;
  background: linear-gradient(transparent, rgba(255,255,255,0.9), transparent);
  mix-blend-mode: overlay;
}

/* collasso verticale tipo TV spenta */
.transition.collapse { background: #000; }
.transition.collapse .tv-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 3px;
  background: #fff; box-shadow: 0 0 20px 4px #fff; transform: translateY(-50%);
}

/* ── BRAND BOX (in cima alla sidebar) ── */
.brand-box {
  padding: 22px 20px 18px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  flex-shrink: 0; background: var(--surface);
}
.brand-logo { width: 78%; max-width: 220px; height: auto; display: block; image-rendering: pixelated; }
.brand-meta { display: flex; align-items: center; gap: 12px; }
/* Riga meta in PIXEL su tutte le piattaforme (deciso 2026-07-13, web/mobile/TV).
   Il pallino è il ::before, NON il carattere "●": Press Start 2P non ha quel
   glifo e il fallback lo disallineava. Taglie ridotte: il pixel rende largo. */
.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; }
/* modalità notte: badge viola (col 🌙, senza pallino) e schermo attenuato */
body.night .onair { background: #6b4fff; }
body.night .onair::before { display: none; }
body.night .player-area { filter: brightness(0.72) saturate(0.85); transition: filter 2s; }
.clock { font-family: var(--pixel); font-size: 10px; color: var(--muted); }
.listeners { font-family: var(--pixel); font-size: 10px; color: var(--accent); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.heart-ico { width: 15px; height: auto; display: block; }
.mute-toggle {
  width: 40px; height: 40px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: transparent; border: 2px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  transition: border-color .15s, color .15s, transform .12s;
}
.mute-toggle:hover { transform: scale(1.08); }
.mute-toggle.muted { color: var(--red); border-color: var(--red); }
.stats-link {
  width: 40px; height: 40px; border-radius: 50%; cursor: var(--cur-mano, pointer); text-decoration: none;
  background: transparent; border: 2px solid var(--border); color: var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: border-color .15s, color .15s, transform .12s;
}
/* barrette del grafico sempre verdi; in hover anche la cornice diventa accent */
.stats-link .bars { fill: var(--accent); }
/* fullscreen: cornice grigia ma icona accent (a tinta #222 non si vedeva) */
#fs-toggle { color: var(--accent); }
.stats-link:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.08); }
/* icone pixelart (pixelarticons) dentro i pulsanti tondi: si scalano al contenitore */
.mute-toggle svg, .stats-link svg, .audio-btn-icon svg { width: 55%; height: 55%; display: block; }

/* ── LAYOUT ── */
.layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  height: 100vh;
  height: 100dvh; /* si adatta alla barra indirizzi mobile */
  height: var(--app-height, 100dvh); /* fallback più affidabile su Chrome iOS (impostato via JS) */
}

/* ── PLAYER AREA ── */
.player-area {
  position: relative; background: #000;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Loading screen */
.loading-screen {
  position: absolute; inset: 0; z-index: 30;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.loading-screen.hidden { display: none; }
.spinner {
  width: 36px; height: 36px; border: 2px solid var(--border);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-txt { font-family: var(--mono); font-size: 14px; color: var(--muted); text-align: center; line-height: 2; }
.loading-title { font-size: 18px; font-weight: 800; color: var(--accent); letter-spacing: .1em; }

/* iframe fills everything */
.player-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
#yt { flex: 1; width: 100%; height: 100%; border: none; display: block; min-height: 0; object-fit: cover; background: #000; }

/* Overlay trasparente: blocca tutti i click sull'iframe YouTube
   (timeline, play/pausa, ecc.) — l'utente non può cambiare la riproduzione */
.click-block {
  position: absolute; inset: 0; z-index: 5;
  cursor: var(--cur-freccia, default); background: transparent;
}

/* Pulsante ATTIVA AUDIO — sopra l'overlay anti-click */
.audio-btn {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  cursor: var(--cur-mano, pointer); border: none; color: var(--text);
  font-family: var(--sans);
}
.audio-btn.hidden { display: none; }
.audio-btn-icon {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.audio-btn-txt { font-size: 16px; font-weight: 800; letter-spacing: .12em; }
.audio-btn-sub { font-family: var(--mono); font-size: 15px; color: var(--muted); }   /* 11px era troppo poco: e' un invito a toccare, non una nota a pie' di pagina */

/* Now playing — su PC: sovrimpressione in basso sul video */
.np-overlay {
  position: absolute; left: 0; right: 0; bottom: 5px; z-index: 11;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  padding: 44px 24px 16px; pointer-events: none; display: none;
}
.np-overlay.visible { display: block; }
.np-ch { font-family: var(--mono); font-size: 15px; color: var(--accent); letter-spacing: .15em; margin-bottom: 6px; }
.np-title { font-family: var(--pixel); font-size: 30px; font-weight: 400; line-height: 1.6; padding-bottom: 4px; }
.np-artist { font-size: 15px; color: rgba(255,255,255,.65); margin-top: 4px; font-family: var(--mono); }
/* pulsante like nella riga del brano in onda, dentro la coda */
.qi-like {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 18px; cursor: var(--cur-mano, pointer);
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  transition: border-color .15s, color .15s, transform .1s, background .15s;
}
.qi-like:hover { border-color: var(--accent); background: rgba(57,255,110,.12); }
.qi-like:active { transform: scale(.9); }
.qi-like.liked { color: var(--accent); border-color: var(--accent); background: rgba(57,255,110,.14); }
.qi-like .thumb-ico { width: 16px; height: 16px; }
/* azioni del brano in onda: info + like */
.qi-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qi-info-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: rgba(255,255,255,.08); border: 1px solid var(--border); color: rgba(255,255,255,.65);
  transition: border-color .15s, color .15s, transform .1s, background .15s;
}
.qi-info-btn .info-ico { width: 17px; height: 17px; }
.qi-info-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(57,255,110,.12); }
.qi-info-btn:active { transform: scale(.9); }
/* evidenzia leggermente se ci sono crediti disponibili */
.qi-info-btn.has-credits { color: var(--accent); }

/* POPUP CREDITI */
.credits-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.credits-modal.open { display: block; }
.credits-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.credits-box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(440px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: var(--bg); border: 2px solid var(--accent); border-radius: 12px;
  padding: 18px 20px 22px; box-shadow: 0 0 30px rgba(57,255,110,.18);
}
.credits-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.credits-eyebrow { font-family: var(--mono); font-size: 14px; letter-spacing: .2em; color: var(--accent); }
.credits-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; cursor: var(--cur-mano, pointer);
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  transition: border-color .15s, color .15s, transform .12s;
}
.credits-close svg { width: 15px; height: 15px; }
.credits-close:hover { border-color: var(--red); color: var(--red); transform: scale(1.08); }
.credits-band { font-size: 22px; font-weight: 800; letter-spacing: .02em; margin: 6px 0 14px; }
.cr-sec { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; color: var(--muted); margin: 14px 0 8px; }
.cr-sec:first-child { margin-top: 0; }
.cr-row { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.cr-role { flex: 0 0 46%; font-family: var(--mono); font-size: 14px; color: rgba(255,255,255,.55); line-height: 1.35; }
.cr-name { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.35; }
.cr-empty { color: var(--muted); font-family: var(--mono); font-size: 15px; padding: 8px 0; }
/* su mobile impila ruolo/nome così i ruoli lunghi restano leggibili a tutta larghezza */
@media (max-width: 560px) {
  .credits-box { padding: 16px 16px 20px; }
  .credits-band { font-size: 20px; }
  .cr-row { flex-direction: column; gap: 1px; padding: 7px 0; }
  .cr-role { flex: none; font-size: 13px; letter-spacing: .05em; }
  .cr-name { font-size: 15px; }
}

/* POPUP CLASSIFICA (dentro la modale crediti: qui solo totali e righe top 5) */
.sp-box { width: min(760px, calc(100vw - 32px)); }
.sp-totals { display: flex; gap: 10px; margin: 6px 0 0; }
/* due classifiche AFFIANCATE (impilate su schermi stretti) + aria dopo i totali */
.sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-top: 20px; }
.sp-cols .cr-sec { margin-top: 0; display: flex; align-items: center; gap: 7px; }
.sp-sec-ico { height: 11px; width: auto; flex: 0 0 auto; }
.sp-sec-ico.acc { color: var(--accent); }
.sp-sec-ico.blue { color: #4fd2ff; }
@media (max-width: 640px) {
  .sp-box { width: min(440px, calc(100vw - 32px)); }
  .sp-cols { grid-template-columns: 1fr; gap: 16px; }
}
.sp-tot { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.sp-tot-n { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent); }
.sp-tot-n .sp-val-ico { height: 13px; }
.sp-tot-n.blue { color: #4fd2ff; }
.sp-tot-l { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-top: 3px; }
.sp-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sp-rank { font-family: var(--mono); font-size: 13px; color: var(--muted); min-width: 18px; text-align: right; }
.sp-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* titolo e artista: tipografia dai RUOLI .t-song / .t-artist (in testa al file) — qui solo layout */
.sp-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-artist { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent); flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.sp-val.blue { color: #4fd2ff; }
.sp-val-ico { height: 9px; width: auto; flex: 0 0 auto; }

/* progress bar */
.prog-bar { height: 5px; background: var(--border); position: relative; flex-shrink: 0; z-index: 12; }
.prog-fill { height: 100%; background: var(--accent); width: 0%; transition: width .8s linear; box-shadow: 0 0 8px var(--accent); }

/* ── SIDEBAR ── */
.sidebar {
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── SIDEBAR A SCOMPARSA (solo desktop col mouse) ──
   Versione web della modalità immersiva TV: dopo un po' di mouse fermo la
   colonna si chiude e la sidebar scivola fuori a destra (il video si allarga);
   qualsiasi attività la richiama. La classe la mette app.js. La larghezza resta
   fissata durante l'animazione così il contenuto non si schiaccia. */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .layout { transition: grid-template-columns .5s ease; }
  .sidebar { transition: transform .5s ease; }
  body.web-immersive .layout { grid-template-columns: 1fr 0px; }
  body.web-immersive .sidebar { width: 460px; transform: translateX(100%); pointer-events: none; }
}
.sb-head {
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.sb-head-title { font-family: var(--pixel); font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.sb-count { font-family: var(--mono); font-size: 14px; color: var(--muted); }

.queue { flex: 1; overflow-y: auto; }
.qi {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid rgba(255,255,255,.03);
  transition: background .12s; position: relative;
  max-height: 120px;   /* niente overflow:hidden qui → i descender (g,p,y) non vengono tagliati */
}
/* il brano che finisce esce dall'alto, gli altri scorrono su.
   overflow:hidden SOLO qui, durante il collasso dell'animazione. */
.qi.leaving {
  max-height: 0; opacity: 0; transform: translateX(-26px); overflow: hidden;
  padding-top: 0; padding-bottom: 0; border-bottom-color: transparent;
  transition: max-height .43s ease, opacity .35s ease, transform .43s ease, padding .43s ease;
}
/* nuovo brano che entra in fondo */
@keyframes qiEnter { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.queue .qi:last-child { animation: qiEnter .35s ease; }
.qi:hover { background: var(--surface2); }
.qi.active { background: rgba(232,255,71,.04); }
.qi.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.qi.playing .qi-num { color: var(--accent); }
.qi-num { font-family: var(--mono); font-size: 14px; color: var(--muted); min-width: 26px; text-align: right; flex-shrink: 0; }
.qi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.qi-info { flex: 1; min-width: 0; }
/* padding-bottom + margin-bottom negativo: dà spazio ai descender (g, p, y) dentro il
   box di clip dell'ellissi, senza alterare il layout (le "g" non vengono più tagliate). */
.qi-title { white-space: nowrap; overflow: hidden;   /* tipografia da .t-song */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.qi-title-txt { display: inline-block; white-space: nowrap; will-change: transform; }
@keyframes qi-loop { from { transform: translateX(0); } to { transform: translateX(var(--qi-unit, 0)); } }
.qi-artist { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* tipografia da .t-artist */
.qi-dur { font-family: var(--mono); font-size: 13px; color: var(--muted); flex-shrink: 0; }

/* ── CHAT (solo locale) ── */
/* Altezza RESPONSIVE: era 440px fissi e su un Full HD con scaling Windows 125-150%
   (PWA installata: ~800px utili) la bacheca si mangiava mezza sidebar ("gigante"). */
.chat { display: none; flex-direction: column; border-top: 1px solid var(--border); background: var(--surface); height: clamp(240px, 42vh, 440px); flex-shrink: 0; position: relative; }
.chat.on { display: flex; }
.chat-head { padding: 10px 16px 8px; font-family: var(--pixel); font-size: 9px; font-weight: 400; letter-spacing: .02em; line-height: 1.7; color: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; display: flex; align-items: baseline; gap: 7px; }
.chat-head .ch-name { font-size: 14px; }   /* "BACHECA" più grande (pixel) */
.chat-head .ch-sub  { font-size: 11.5px; }    /* "· un messaggio al giorno" pixel, più piccolo */
.chat-msgs { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 7px; }
.chat-msg { font-size: 15px; line-height: 1.35; word-break: break-word; position: relative; padding-right: 20px; }
.chat-msg .who { color: var(--accent); font-weight: 700; font-family: var(--mono); font-size: 14px; margin-right: 6px; }
/* ── MODERAZIONE bacheca (Apple 1.2): segnala/blocca per messaggio ── */
/* pulsante ⚑ per messaggio: appare in hover su desktop, sempre lieve su touch */
.msg-flag { position: absolute; right: -2px; top: -1px; background: none; border: none; color: var(--muted); cursor: var(--cur-mano, pointer); font-size: 15px; line-height: 1; padding: 2px 3px; opacity: 0; transition: opacity .12s, color .12s; }
.chat-msg:hover .msg-flag { opacity: .55; }
.msg-flag:hover { color: var(--red); opacity: 1; }
@media (hover: none) { .msg-flag { opacity: .4; } }
/* menu segnala/blocca ancorato al messaggio */
.mod-menu { position: fixed; z-index: 70; background: var(--bg); border: 1px solid var(--accent); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.mod-menu button { background: none; border: none; color: var(--text); text-align: left; padding: 9px 13px; border-radius: 5px; cursor: var(--cur-mano, pointer); font-size: 15px; white-space: nowrap; }
.mod-menu button:hover { background: rgba(255,255,255,.08); }
.mod-menu button.mm-block { color: var(--red); }
/* regole bacheca (EULA) */
.terms-txt { font-size: 15.5px; line-height: 1.5; color: var(--text); margin: 12px 0; }
.terms-txt b { color: var(--accent); }
.terms-link { display: inline-block; font-family: var(--mono); font-size: 14px; color: var(--accent); margin-bottom: 16px; }
.terms-row { display: flex; gap: 10px; justify-content: flex-end; }
.terms-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; padding: 10px 16px; cursor: var(--cur-mano, pointer); font-family: var(--mono); }
.terms-ghost:hover { border-color: var(--muted); color: var(--text); }
.terms-accept { padding: 10px 22px; }
/* bottone "scrivi" nella bacheca: apre il popup di composizione (così l'input non
   vive nel guscio fisso e la tastiera iOS non fa più saltare il layout). */
.chat-open { margin: 8px 10px; padding: 9px 12px; border-radius: 4px; cursor: var(--cur-mano, pointer); flex-shrink: 0;
  background: rgba(57,255,110,.12); border: 1px solid var(--accent); color: var(--accent);
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .04em;
  transition: background .15s, transform .1s; }
.chat-open:hover { background: rgba(57,255,110,.2); }
.chat-open:active { transform: scale(.98); }
.chat-open[disabled] { display: none; }

/* POPUP COMPOSIZIONE — ancorato in alto: la tastiera (in basso) non lo copre mai */
.compose-modal { position: fixed; inset: 0; z-index: 62; display: none; }
.compose-modal.open { display: block; }
.compose-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.compose-box { position: absolute; left: 50%; top: 11vh; transform: translateX(-50%);
  width: min(440px, calc(100vw - 28px)); background: var(--bg); border: 2px solid var(--accent);
  border-radius: 12px; padding: 16px 18px 18px; box-shadow: 0 0 30px rgba(57,255,110,.18); }
.compose-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.compose-eyebrow { font-family: var(--mono); font-size: 14px; letter-spacing: .18em; color: var(--accent); }
.compose-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; cursor: var(--cur-mano, pointer); background: transparent; border: 1px solid var(--border); color: var(--muted);
  transition: border-color .15s, color .15s, transform .12s; }
.compose-close svg { width: 15px; height: 15px; }
.compose-close:hover { border-color: var(--red); color: var(--red); transform: scale(1.08); }
.chat-form { display: flex; flex-direction: column; gap: 8px; position: relative; }
/* form inline nel pannello bacheca (Android/PC, non iOS) */
.chat-form.inline { border-top: 1px solid var(--border); padding: 10px; background: var(--surface); flex-shrink: 0; }
.chat-form input { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 10px 11px; font-family: var(--mono); font-size: 16px; width: 100%; }
.chat-form input:focus { outline: none; border-color: var(--accent); }
.compose-row { display: flex; gap: 8px; }
.compose-row .chat-text { flex: 1; min-width: 0; }
.chat-emoji { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0 11px; cursor: var(--cur-mano, pointer); font-size: 17px; flex-shrink: 0; }
.chat-emoji:hover { border-color: var(--accent); }
.compose-send { background: var(--accent); color: #000; border: none; border-radius: 4px; padding: 10px; font-family: var(--mono); font-weight: 800; letter-spacing: .06em; cursor: var(--cur-mano, pointer); }
.compose-send:active { transform: scale(.99); }
/* picker emoji — inline nel popup */
.emoji-pop { display: none; flex-wrap: wrap; gap: 2px; padding: 8px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface2); max-height: 132px; overflow-y: auto; }
.emoji-pop.on { display: flex; }
.emoji-pop button { background: none; border: none; font-size: 20px; cursor: var(--cur-mano, pointer); padding: 3px; border-radius: 4px; line-height: 1; }
.emoji-pop button:hover { background: rgba(255,255,255,.1); }
.chat-note { margin: 8px 10px; padding: 8px 10px; font-family: var(--mono); font-size: 13px; color: var(--accent); border: 1px solid var(--border); border-radius: 4px; flex-shrink: 0; }

/* scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }

/* Layout mobile SOLO in verticale. In orizzontale (landscape) si usa il desktop. */
@media (max-width: 700px) and (orientation: portrait) {
  /* video 16:9 pieno; titolo in sovrimpressione IN ALTO (recupera spazio) */
  .layout { grid-template-columns: 1fr; grid-template-rows: 56.25vw 1fr; }
  .player-area { min-height: 0; }
  .sidebar { border-left: none; border-top: 1px solid var(--border); min-height: 0; }
  /* brand box in riga compatta: logo piccolo a sx, info a dx */
  .brand-box {
    flex-direction: row; justify-content: space-between; align-items: center;
    padding: 10px 16px; gap: 12px;
  }
  .brand-logo { width: auto; height: 34px; max-width: 45%; }
  .brand-meta { gap: 10px; }
  .mute-toggle { width: 34px; height: 34px; font-size: 15px; }
  .stats-link { width: 34px; height: 34px; font-size: 16px; }
  /* su mobile: "in onda" in OVERLAY sul video, in alto */
  .np-overlay {
    position: absolute; top: 0; bottom: auto; left: 0; right: 0; z-index: 12;
    background: linear-gradient(rgba(0,0,0,.92), rgba(0,0,0,.45) 65%, transparent);
    border-bottom: none; padding: 7px 12px 16px; pointer-events: none;
  }
  .np-ch { font-size: 12px; margin-bottom: 1px; }
  .np-title { font-size: 12px; font-weight: 700; line-height: 2; padding-bottom: 2px; }
  .np-artist { display: none; }   /* schermo minuscolo: la session la si intuisce dal titolo */
  /* coda più compatta (taglie D'EPOCA, generiche: valgono anche per il menu
     della REGIA, che riusa .qi/.qi-title/.qi-artist — "l'admin e' la radio") */
  .qi-title { font-size: 13px; }
  .qi-artist { font-size: 13px; }
  .qi-num, .qi-dur { font-size: 13px; }
  .qi-like { padding: 5px 10px; font-size: 13px; gap: 5px; }
  .qi-like .thumb-ico { width: 13px; height: 13px; }
  /* ⚠️ Le strette in piu' valgono SOLO PER LA SHELL: la prima versione era
     generica e ha rimpicciolito anche il menu della regia sul telefono —
     l'utente l'ha visto subito ("la tab a sinistra e' diversa", 31/08). */
  .shell .qi { padding: 7px 14px; gap: 10px; }
  .shell .qi-artist { font-size: 12px; }
  .shell .qi-num, .shell .qi-dur { font-size: 12px; }
  .shell .qi-num { min-width: 22px; }
  .shell .qi-like { padding: 4px 8px; font-size: 12px; gap: 4px; }
  .shell .qi-like .thumb-ico { width: 12px; height: 12px; }
  /* le testate pixel erano fuori scala sul telefono (12px pixel = equiv 17):
     etichette come "IN CODA · UP NEXT" dell'app. Solo shell: l'admin non c'entra */
  .shell .sb-head { padding-top: 8px; padding-bottom: 6px; }
  .shell .sb-head-title { font-size: 8px; }
  .shell .chat-head .ch-name { font-size: 10px; }
  .shell .chat-head .ch-sub { font-size: 8.5px; }
  .shell .chat-msg { font-size: 14px; }
  .shell .chat-msg .who { font-size: 13px; }
  /* bacheca più alta su mobile */
  .chat { height: 240px; }
  /* nome su riga propria a tutta larghezza (così si capisce dove scriverlo) */
  .chat-form { flex-wrap: wrap; }
  .chat-name { width: 100%; order: -1; }
  .emoji-pop { bottom: 100px; }   /* sopra il form a 2 righe */
}

/* Landscape su schermi bassi (telefoni in orizzontale): layout desktop ma compatto */
@media (orientation: landscape) and (max-height: 520px) {
  .layout { grid-template-columns: 1fr 360px; }
  /* logo in riga compatta per recuperare altezza */
  .brand-box { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 14px; gap: 10px; }
  .brand-logo { height: 30px; width: auto; max-width: 42%; }
  .brand-meta { gap: 8px; }
  .mute-toggle, .stats-link { width: 32px; height: 32px; font-size: 16px; }
  .np-ch { font-size: 12px; margin-bottom: 3px; }
  .np-title { font-size: 20px; line-height: 1.3; }
  .np-artist { font-size: 14px; }
  .np-overlay { padding: 24px 16px 12px; }
  .sb-head { padding: 8px 16px 7px; }
  /* bacheca compatta così la coda resta visibile */
  .chat { height: 130px; }
  .chat-head { padding: 6px 14px 5px; }
  .emoji-pop { bottom: 50px; max-height: 96px; }
}

/* ══ SHELL (gocrew.it/) ═══════════════════════════════════════════════════════
   Tutto scoperto da body.shell: su /radio/ queste regole non toccano nulla.
   Modello: la testata dell'app mobile — logo · RADIO TOP EVENTI · on air ·
   ascoltatori · orologio · muto · fullscreen. Il video resta UNO ( #yt ):
   sui tab TOP/EVENTI la .player-area diventa il PIP fisso in basso a destra.
   ⚠️ Questo blocco sta PRIMA del PIXEL UI (che applica-stile.js rigenera in
   coda al file e va tenuto identico a brand.css). */

.shell .appbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; gap: 22px;
  padding: 0 18px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.shell .appbar .logo-go { height: 26px; display: block; }
.shell .tabs { display: flex; gap: 20px; }
.shell .tab {
  appearance: none; background: none; border: 0; padding: 4px 0 6px;
  font-family: var(--pixel); font-size: 10px; letter-spacing: 1px;
  color: var(--muted); cursor: var(--cur-mano, pointer);
  border-bottom: 2px solid transparent;
}
.shell .tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.shell .appbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* il layout della radio scende sotto la testata */
.shell .layout { height: calc(var(--app-height, 100dvh) - 52px); }

/* ── viste TOP / EVENTI (spente di default) ── */
.shell #view-top, .shell #view-eventi { display: none; }
.shell[data-tab="top"] #view-top {
  display: block; overflow-y: auto;
  height: calc(var(--app-height, 100dvh) - 52px);
  padding: 26px 22px calc(26px + 200px);   /* aria in fondo: sotto ci galleggia il PIP */
  max-width: 980px; margin: 0 auto; width: 100%;
}
.shell[data-tab="eventi"] #view-eventi {
  display: flex; flex-direction: column;
  height: calc(var(--app-height, 100dvh) - 52px);
}
.shell #view-eventi .ring { flex: 1; min-height: 0; }
.shell .view-head { margin: 0 0 6px; }
.shell .view-kick { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: var(--accent); }
.shell .view-title { font-family: var(--sans); font-weight: 800; font-size: 44px; letter-spacing: 1px; line-height: 1; margin: 4px 0 0; }

/* ── PIP: stessa .player-area, cornice diversa ──
   Niente re-parenting: #yt non si tocca, cambia solo la scatola. */
.shell[data-tab="top"] .sidebar, .shell[data-tab="eventi"] .sidebar { display: none; }
.shell[data-tab="top"] .layout, .shell[data-tab="eventi"] .layout {
  display: block; height: 0; overflow: visible;   /* il layout si sgonfia: restano solo i figli fissi */
}
.shell[data-tab="top"] .player-area, .shell[data-tab="eventi"] .player-area {
  position: fixed; right: 16px; bottom: 16px;
  width: min(320px, 46vw); aspect-ratio: 16 / 9;
  z-index: 70; border: 1px solid var(--border);
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  animation: none;                                 /* niente jitter in miniatura */
  cursor: var(--cur-mano, pointer);
}
.shell[data-tab="top"] .np-overlay, .shell[data-tab="eventi"] .np-overlay { display: none; }
/* trascinabile con mouse E dita: senza touch-action il browser scrolla la pagina */
.shell[data-tab="top"] .player-area, .shell[data-tab="eventi"] .player-area { touch-action: none; }
/* si ridimensiona DAI BORDI come una finestra (app.js mette il cursore giusto
   inline sulla .player-area): il .click-block sopra deve lasciarlo passare */
.shell[data-tab="top"] .click-block, .shell[data-tab="eventi"] .click-block { cursor: inherit; }
.shell[data-tab="top"] .prog-bar, .shell[data-tab="eventi"] .prog-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
}
/* ATTIVA AUDIO in miniatura: resta cliccabile ma compatto */
.shell[data-tab="top"] .audio-btn, .shell[data-tab="eventi"] .audio-btn { transform: scale(.55); }

/* ── striscia link in fondo alla sidebar (ex badge della home) ── */
.shell .side-links {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 10px 16px; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 12px;
}
.shell .side-links a { color: var(--muted); text-decoration: none; }
.shell .side-links a:hover { color: var(--accent); }

/* ── barra IN ONDA (il PIP da telefono e' invadente: si torna col tocco) ── */
.shell .mini-onda {
  display: none; appearance: none; background: var(--surface); border: 0;
  border-top: 1px solid var(--border); color: var(--text);
  cursor: var(--cur-mano, pointer); text-align: left;
}
.shell .mo-dot { width: 7px; height: 7px; background: var(--red); flex-shrink: 0; }
.shell .mo-lab { font-family: var(--pixel); font-size: 8px; color: var(--muted); flex-shrink: 0; }
.shell .mo-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 13px; }
.shell .mo-cta { font-family: var(--pixel); font-size: 8px; color: var(--accent); flex-shrink: 0; }

/* ── strette (telefono) ── */
@media (max-width: 700px) {
  /* niente PIP: fuori vista MAI smontato (l'audio e' il video stesso), e al
     suo posto la barra fissa in basso, come la mini-barra dell'app */
  .shell[data-tab="top"] .player-area, .shell[data-tab="eventi"] .player-area {
    top: -10px; left: 0; right: auto; bottom: auto;
    width: 2px; height: 2px; aspect-ratio: auto;
    opacity: 0; pointer-events: none; border: 0; box-shadow: none;
  }
  .shell[data-tab="top"] .mini-onda, .shell[data-tab="eventi"] .mini-onda {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    align-items: center; gap: 10px; height: 46px; padding: 0 14px;
  }
  .shell[data-tab="top"] #view-top { padding-bottom: 70px; }
  .shell[data-tab="eventi"] #view-eventi { height: calc(var(--app-height, 100dvh) - 52px - 46px); }

  .shell .appbar { gap: 12px; padding: 0 12px; }
  .shell .appbar .clock, .shell .appbar #fs-toggle { display: none; }
  .shell .tabs { gap: 12px; }
  .shell .tab { font-size: 8px; }
  .shell .view-title { font-size: 30px; }
  .shell[data-tab="top"] #view-top { padding: 18px 14px calc(18px + 46vw * 9 / 16 + 32px); }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ 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; }
}