/* NEONODE / app — overlay scanner AR (brief 19, prompt 4/5; rivestito cantiere
   33 FETTA 5A: solo la cornice — occhiello, didascalia, chiudi. Il "mirino"
   qui RESTA l'anello di sintonizzazione (mirino-HUD fisso al centro, scoperta
   chiave 19/4: non si cambia, è la lettura). Canvas 3D/MindAR/setAnimationLoop
   non toccati. Token invece di colori a mano: regge i tre accenti. */

.nn-ar {
  position: fixed; inset: 0; z-index: 60; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nn-ar__container {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.nn-ar__container video, .nn-ar__container canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ---- barra in cima: occhiello a sinistra, chiudi a destra ---- */
.nn-ar__barra {
  position: absolute; z-index: 4; left: 0; right: 0;
  top: max(12px, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.nn-ar__occhiello { background: rgba(7,8,12,0.7); }
.nn-ar__chiudi { background: rgba(7,8,12,0.8); }

.nn-ar__hint {
  position: absolute; z-index: 2; bottom: 14%; left: 0; right: 0; text-align: center;
  color: var(--txt); font-family: var(--font-mono); font-size: 13px; letter-spacing: 1px;
  text-shadow: 0 1px 4px #000; pointer-events: none;
}
.nn-ar__msg {
  position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--txt); font-family: var(--font-mono); font-size: 14px;
  letter-spacing: 1px; padding: 0 24px;
}

.nn-ar__anello {
  position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44vmin; max-width: 220px; aspect-ratio: 1 / 1; pointer-events: none;
}
.nn-ar__anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nn-ar__anello-bg { fill: none; stroke: rgba(0,229,255,0.18); stroke-width: 4; }
.nn-ar__anello-fg {
  fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent));
  transition: stroke-dashoffset 0.05s linear;
}
.nn-ar__anello.spento .nn-ar__anello-fg { stroke: #6b7680; filter: none; }

.nn-ar__etichetta {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, 70px);
  color: var(--txt-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  text-align: center; background: rgba(7,8,12,0.7); padding: 4px 10px;
}

.nn-ar__flash {
  position: absolute; inset: 0; z-index: 3; background: var(--accent);
  opacity: 0; pointer-events: none; animation: nn-ar-flash 0.35s ease-out;
}
@keyframes nn-ar-flash { 0% { opacity: 0.65; } 100% { opacity: 0; } }

/* ---- orizzontale: comandi sul lato corto, didascalia a sinistra (brief 30 §3).
   .nn-scanner__manuale è condiviso col fallback QR: la regola landscape sta in
   app/qr/qr.css (caricato prima), qui solo ciò che è specifico dell'AR. ---- */
@media (orientation: landscape) {
  .nn-ar__anello { left: 38%; }
  .nn-ar__hint {
    left: 16px; right: auto; bottom: auto; top: 50%; transform: translateY(-50%);
    text-align: left; max-width: 180px;
  }
  .nn-ar__etichetta { left: 38%; }
  .nn-ar__barra { right: 148px; }
}