/* ============================================================
   NEONODE — UTILITY HUD (cornici cyberpunk riusabili)
   Usa SOLO i token di shared/stile/tokens.css. Niente colori a mano.
   ============================================================ */

/* cornice ad angoli tagliati con bordo neon: due strati (bordo + interno) */
.nn-hud,
.nn-hud__in {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                     100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.nn-hud      { position: relative; padding: 1px; background: var(--accent); }
.nn-hud__in  { background: var(--surf); height: 100%; }

/* varianti di colore del bordo (il dentro resta scuro) */
.nn-hud--accent { background: var(--accent); }
.nn-hud--cy     { background: var(--cy); }
.nn-hud--mag    { background: var(--mag); }
.nn-hud--lime   { background: var(--lime); }
.nn-hud--ok     { background: var(--ok); }
.nn-hud--err    { background: var(--err); }
.nn-hud--warn   { background: var(--warn); }

/* solo il taglio d'angolo, senza bordo (per pannelli pieni) */
.nn-cut {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                     100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* banda di pericolo lime/nero e velo a scanline */
.nn-hazard { background: var(--hazard); }
.nn-scan   { background-image: var(--scanline); }

/* bagliori neon di testo (il glow si AGGIUNGE, regola 17) */
.nn-glow-cy   { text-shadow: var(--glow-cy); }
.nn-glow-mag  { text-shadow: var(--glow-mag); }
.nn-glow-lime { text-shadow: var(--glow-lime); }
.nn-glow-accent { text-shadow: var(--glow-accent); }