@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;}

.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;
}
#artCanvas{display:block;}
/* 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;}

.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;
}