@font-face{
  font-family:"Spline Sans Mono";
  src:url("../fonts/SplineSansMono.ttf") format("truetype-variations"),
      url("../fonts/SplineSansMono.ttf") format("truetype");
  font-weight:300 700;
  font-display:swap;
}

:root{
  --bg:#1c1c1e;
  --text:#f3f1ee;
  --muted:#8b8b90;
  --btn-bg: rgba(255,255,255,0.07);
  --btn-border: rgba(255,255,255,0.14);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;padding:0;width:100%;height:100%;overflow:hidden;
  background:var(--bg);
  font-family:"Spline Sans Mono", Menlo, monospace;
  color:var(--text);
  -webkit-user-select:none;user-select:none;
  position:fixed;
}

.ui-top{
  position:fixed;
  top:env(safe-area-inset-top, 14px);
  left:0;right:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  z-index:30;
}
.ui-top .spacer{flex:1}

.glass-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--btn-border);
  background:var(--btn-bg);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, background .2s ease, opacity .2s ease;
  padding:0;
  text-decoration:none;
}
.glass-btn svg{width:18px;height:18px}
.glass-btn:active{transform:scale(0.88);background:rgba(255,255,255,0.16);}
.glass-btn[disabled]{opacity:.3;pointer-events:none;}
.glass-btn.on{background:#f3f1ee;color:#111111;border-color:#f3f1ee;}

/* pallino di registrazione: bianco a riposo, diventa rosso e pulsa mentre
   registra — l'unico segnale a schermo che la registrazione è in corso,
   niente cronometro o badge */
.rec-btn .rec-dot{
  width:14px;height:14px;border-radius:50%;
  background:#f3f1ee;
  box-shadow:0 0 0 0 rgba(220,50,47,0);
  transition:background .2s ease;
}
.rec-btn.recording .rec-dot{
  background:#e03131;
  animation:rec-pulse 1.1s infinite;
}
@keyframes rec-pulse{
  0%{box-shadow:0 0 0 0 rgba(224,49,49,0.55)}
  70%{box-shadow:0 0 0 9px rgba(224,49,49,0)}
  100%{box-shadow:0 0 0 0 rgba(224,49,49,0)}
}

.stage{
  position:fixed;inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(env(safe-area-inset-top, 14px) + 60px) 24px calc(env(safe-area-inset-bottom, 10px) + 24px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.empty-state{
  flex:1;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#b7b6ba;
  text-align:center;
  padding:0 30px;
}
.empty-state:not([hidden]){display:flex;}
.empty-state svg{width:48px;height:48px;opacity:.6;margin-bottom:4px;}
.empty-state p{margin:0;font-size:14px;font-weight:500;color:#9d9ca1;}

.reader{
  width:100%;
  max-width:440px;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.reader:not([hidden]){display:flex;}

.stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.image-frame{
  position:relative;
  line-height:0;
  border-radius:16px;
  overflow:hidden;
  /* su sfondo nero un'ombra scura da sola sparisce: un anello chiaro
     sottile stacca il riquadro dalla pagina al posto del rilievo di prima */
  box-shadow:0 20px 44px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  flex:none;
  cursor:pointer; /* si tocca per aprirla a schermo intero */
}
#imgCanvas{display:block;}
/* la mappa dei segni sta in sovrimpressione diretta sull'immagine, stessa
   dimensione esatta (inset:0 dentro .image-frame, che ha già le sue misure
   fissate in px da JS) */
.read-overlay{
  position:absolute;
  inset:0;
  /* <canvas> è un elemento "replaced": inset:0 da solo non lo fa scalare
     al contenitore (userebbe la sua dimensione intrinseca, il buffer
     width/height) — serve width/height:100% esplicito */
  width:100%;
  height:100%;
  pointer-events:none;
}

/* pannello dello "schema": a fine lettura scivola in vista sotto
   all'immagine, stessa identica dimensione (1:1) — resta collassato
   (max-height:0) finché la lettura non finisce, vedi revealSchema() */
.schema-frame{
  width:100%;
  max-height:0;
  opacity:0;
  overflow:hidden;
  border-radius:16px;
  /* resta sempre bianco: i puntini colorati dell'analisi sono pensati per
     staccare su un fondo chiaro, non sul nero della pagina */
  background:#ffffff;
  box-shadow:0 20px 44px rgba(0,0,0,0.5);
  margin-top:0;
  transition:max-height .8s cubic-bezier(.4,0,.2,1), opacity .6s ease, margin-top .8s cubic-bezier(.4,0,.2,1);
}
#schemaCanvas{display:block;width:100%;height:100%;}

/* barra della durata del loop musicale (stile YouTube): non esiste finché
   non comincia il loop — display:none finché non serve, altrimenti il gap
   di .reader le riserverebbe comunque 20px sopra e sotto anche ad altezza
   0, allargando lo spazio fra immagine e onda già durante la prima lettura */
.loop-bar{
  display:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.14);
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.loop-bar.visible{display:block;}
.loop-bar-fill{
  height:100%;
  width:0%;
  background:#f3f1ee;
  border-radius:2px;
}

/* onda + barretta colore: spariscono (si accorciano e sfumano) quando lo
   schema si rivela a fine lettura, per lasciare solo il "doppio quadretto" */
.post-scan{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  max-height:100px;
  opacity:1;
  overflow:hidden;
  transition:max-height .5s ease, opacity .4s ease, margin-top .5s ease;
}
.post-scan.away{
  max-height:0;
  opacity:0;
  margin-top:0;
}

.wave{
  height:34px;
  display:block;
}

/* riga sotto l'onda: scritta a sinistra, tasto play a destra, larga quanto
   l'immagine (la larghezza la imposta JS) */
.play-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.caption{
  flex:1;
  min-width:0;
  margin:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px;
  line-height:1.3;
  text-align:left;
  color:var(--muted);
}

.play-btn{
  width:38px;height:38px;border-radius:50%;
  background:#f3f1ee;
  color:#111111;
  border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
  transition:transform .15s ease, background .2s ease, color .2s ease;
  flex:none;
}
.play-btn svg{width:18px;height:18px;margin-left:1px}
.play-btn:active{transform:scale(0.92)}
.play-btn.playing{background:rgba(255,255,255,0.12);color:#f3f1ee;}

/* ---- vista a schermo intero: foto + puntini, zoomabile a mano ---- */
.lightbox{
  position:fixed;inset:0;
  z-index:50;
  background:var(--bg);
  flex-direction:column;
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox:not([hidden]){display:flex;}
/* la classe "show" arriva un frame dopo aver tolto [hidden] (vedi JS), così
   il browser fa in tempo a dipingere lo stato di partenza e la transizione
   si vede davvero — un po' come si apre una foto dalla galleria, non uno
   scatto secco */
.lightbox.show{opacity:1;}
.lightbox-top{
  position:absolute;
  top:env(safe-area-inset-top, 14px);
  left:0;right:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  z-index:2;
}
.lightbox-top .spacer{flex:1}
.lightbox-viewport{
  flex:1;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  /* margine dai bordi dello schermo: la foto non deve arrivare a filo */
  padding:calc(env(safe-area-inset-top, 14px) + 70px) 24px calc(env(safe-area-inset-bottom, 10px) + 24px);
  /* il gesto di pinch/pan lo gestiamo a mano in JS: niente scroll o zoom
     nativi della pagina che entrino in conflitto */
  touch-action:none;
  transform:scale(0.94);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.lightbox.show .lightbox-viewport{transform:scale(1);}
.lightbox-viewport img{
  max-width:100%;
  max-height:100%;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  will-change:transform;
}

.toast{
  position:fixed;
  /* ancorato in ALTO, appena sotto la barra dei pulsanti, non in basso: il
     tasto play qui è dentro il flusso della pagina (non fisso come nelle
     altre app Nettare) e la sua posizione cambia con l'immagine caricata —
     un valore fisso dal basso ci finiva sopra, specie quando il messaggio
     va a capo su due righe. Qui sotto ai pulsanti c'è sempre spazio libero. */
  top:calc(env(safe-area-inset-top, 14px) + 62px);
  left:50%;transform:translateX(-50%);
  background:rgba(243,241,238,0.95);
  color:#111111;font-size:13px;
  padding:10px 16px;border-radius:14px;
  z-index:40;
  max-width:80vw;text-align:center;
}