/* ============================================================
   NEONODE — DIAL DEL POLLICE (cantiere 33, fetta 2). Solo token (§9):
   niente colori a mano. Le POSIZIONI (right/left/bottom/width/height di
   nucleo e pastiglie) le scrive shared/logica/dial-posizioni.js via
   style inline — qui c'è SOLO la forma, mai un numero di layout.
   z-index 100 (vincolo A): sopra mappa(40)/scanner(55)/QR/AR/countdown(60),
   sotto popup(1000)/toast(1100)/minigiochi(1200)/glitch/freeze/schermo-nero.
   ============================================================ */
.nn-dial {
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;   /* solo i cerchi (nucleo/pastiglie) sono cliccabili */
}
.nn-dial--nascosto { display: none; }

.nn-dial__nucleo,
.nn-dial__sat {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}

.nn-dial__nucleo {
  background: var(--accent); color: #06070B;
  box-shadow: var(--glow-accent);
  border: 3px solid var(--bg);
}
.nn-dial__nucleo .nn-ico { stroke: #06070B; }
.nn-dial__nucleo span {
  font-family: var(--font-mono); font-size: 8px; font-weight: 800; letter-spacing: .08em; margin-top: 1px;
}

.nn-dial__sat {
  background: rgba(14, 16, 24, .94);
  border: 1px solid var(--line-strong);
  color: var(--txt-muted);
}
.nn-dial__sat:hover,
.nn-dial__sat.on { border-color: var(--accent); color: var(--accent); }

/* I nomi sotto le icone sono stati TOLTI il 2026-07-26 (richiesta utente: occupavano
   troppo spazio). Restano come aria-label per l'accessibilità. Forse torneranno. */

/* ---- BOTTONE ☰ (stato chiuso) ----
   Da chiuso il dial è solo Scanner + questo bottone: il contenuto delle schermate
   torna a tutto schermo. Un tocco apre l'arco, un altro lo richiude. */
.nn-dial__menu {
  position: absolute;
  pointer-events: auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  background: rgba(14, 16, 24, .94);
  border: 1px solid var(--line-strong);
  color: var(--txt-muted);
  padding: 0;
}
.nn-dial__barre { display: flex; flex-direction: column; gap: 4px; }
.nn-dial__barre i { display: block; width: 20px; height: 2px; background: currentColor; }
.nn-dial--aperto .nn-dial__menu { border-color: var(--accent); color: var(--accent); }

/* ---- ARCO: c'è solo da aperto ---- */
.nn-dial__sat { opacity: 0; transform: scale(.6); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.nn-dial--aperto .nn-dial__sat { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .nn-dial__sat { transition: none; } }

/* sfumatura SOLO nell'angolo (scelta dell'utente): le icone restano leggibili sopra la
   mappa senza oscurare tutto lo schermo. Non intercetta i tocchi. */
.nn-dial--aperto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 100% 100%, rgba(6,7,11,.92) 0%, rgba(6,7,11,.72) 45%, transparent 72%);
}
[data-dial="sx"] .nn-dial--aperto::before {
  background: radial-gradient(circle at 0% 100%, rgba(6,7,11,.92) 0%, rgba(6,7,11,.72) 45%, transparent 72%);
}

.nn-dial__badge {
  display: none;
  position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--err); box-shadow: var(--glow-err);
}
.nn-dial__sat.ha-notifica .nn-dial__badge { display: block; }