/* Stile condiviso del lettore — usato da ogni cartella volX/. Modificare
   qui cambia l'aspetto in TUTTI i volumi contemporaneamente. */

:root {
  --void: #0A0A0F;
  --void-soft: #111119;
  --cobalt: #1D3FE0;
  --cobalt-bright: #3D6BFF;
  --yellow: #FFC814;
  --signal: #FF5A1F;
  --paper: #ECE7DC;
  --ink: #16161A;
  --line: #2B3050;
  --line-soft: rgba(43, 48, 80, 0.5);
  --text: #E7E6EA;
  --text-dim: #8B8FA3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  background: var(--void);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}
::selection { background: var(--signal); color: var(--void); }

/* Nasconde visivamente un testo mantenendolo leggibile dagli screen
   reader — usata per la label del campo email della tendina (il
   placeholder da solo non è una label accessibile). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top bar: logo + episodi ---------- */

.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.25rem 2rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top));
  background: linear-gradient(to bottom, rgba(10,10,15,0.95), rgba(10,10,15,0));
  pointer-events: none;
}
.top-bar * { pointer-events: auto; }

.brand-block {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  line-height: 1;
  padding-right: 1rem;
}
.wordmark {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--yellow);
  white-space: nowrap;
}
.category {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
  padding-left: 0.1rem;
}

.episode-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  gap: 1.5rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  transition: opacity 0.15s ease;
}
.episode-nav button {
  font: inherit;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  color: var(--text-dim);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, border-color 0.15s;
}
.episode-nav button:hover { color: var(--text); }
.episode-nav button.current {
  color: var(--yellow);
  border-color: var(--yellow);
}

/* Tastino audio: vive in basso a destra, di fianco al contatore pagine
   (vedi .hud-corner più sotto) — sempre visibile, indipendente dalla
   tendina iniziale ON/OFF, permette di riattivare o silenziare in
   qualsiasi momento della lettura. */
.sound-toggle-btn {
  width: 2.3rem;
  height: 2.3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--void-soft);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.sound-toggle-btn:hover { border-color: var(--text-dim); }
.sound-toggle-btn.muted {
  color: var(--text-dim);
  opacity: 0.55;
}

/* Etichetta del volume corrente: dato secondario, discreto — cambia da
   sola (stessa logica della barra episodi) quando si passa al volume
   successivo. Specchia il logo sull'altro lato della barra. */
.volume-tag {
  grid-column: 3;
  justify-self: end;
  position: relative;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  opacity: 0.45;
  white-space: nowrap;
}

/* Quando ci sono più volumi, l'etichetta diventa un piccolo selettore —
   più visibile del semplice dato informativo, per far capire che si può
   toccare: bianco pieno invece del grigio discreto di default. */
.volume-tag.clickable {
  cursor: pointer;
  color: var(--text);
  opacity: 0.9;
  transition: opacity 0.15s;
}
.volume-tag.clickable:hover,
.volume-tag.clickable:focus-visible { opacity: 1; }
.volume-tag.clickable::after {
  content: "";
  display: inline-block;
  margin-left: 0.4em;
  border: 3px solid transparent;
  border-top-color: currentColor;
  opacity: 0.7;
  vertical-align: middle;
  transform: translateY(1px);
}

.volume-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 6.5rem;
  background: var(--void-soft);
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 110;
}
.volume-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.volume-menu button {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 0.6rem 0.85rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.volume-menu button:last-child { border-bottom: none; }
.volume-menu button:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.volume-menu button.current { color: var(--yellow); }

@media (max-width: 640px) {
  .top-bar { padding-left: 1.25rem; padding-right: 1.25rem; }
  .wordmark { font-size: 1.05rem; }
  .category { font-size: 0.56rem; }
  .episode-nav { gap: 0.65rem; font-size: 0.66rem; }
  .volume-tag { font-size: 0.58rem; }
}
@media (max-width: 380px) {
  .episode-nav { gap: 0.45rem; font-size: 0.6rem; }
  .volume-tag { display: none; } /* su schermi molto stretti lascia spazio a logo + episodi */
}

/* ---------- Reader: striscia orizzontale a scorrimento con snap ---------- */

.reader-scroll {
  position: fixed;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reader-scroll::-webkit-scrollbar { display: none; }

.page-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5.5rem 1.1rem 4.75rem;
}

/* Le tavole sono tutte 1400×1980px (stesso rapporto): fissando questo
   stesso rapporto sulla page-card, il suo riquadro combacia sempre
   esattamente con l'immagine visibile, senza bande vuote ai lati
   quando è l'altezza dello schermo a essere il vincolo (finestre
   larghe e basse) — così il watermark, agganciato all'angolo della
   page-card, cade sempre dentro al bordo bianco della tavola e mai
   fuori. */
.page-card {
  position: relative;
  width: min(720px, 100%, calc((100vh - 10.25rem) * 1400 / 1980));
  /* 100dvh invece di 100vh su chi lo supporta: su Safari iOS 100vh conta
     l'altezza "con la barra degli indirizzi nascosta", quindi sballa la
     misura finché non scorri — dvh segue l'altezza visibile reale. Se il
     browser non conosce dvh scarta la riga e resta quella sopra. */
  width: min(720px, 100%, calc((100dvh - 10.25rem) * 1400 / 1980));
  aspect-ratio: 1400 / 1980;
  background: transparent;
}
.page-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
/* Watermark discreto: dissuade la ricondivisione senza disturbare la
   lettura — piccolo, nero, semi-trasparente. Posizionato a distanza
   fissa dall'angolo in basso a destra della page-card (non in
   percentuale): resta sempre nello stesso identico punto tavola dopo
   tavola, appoggiato sul bordo bianco. */
.page-card .page-watermark {
  position: absolute;
  bottom: 0.2rem;
  right: 0.8rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0A0A0A;
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 480px) {
  .page-card .page-watermark { font-size: 0.52rem; bottom: 0.15rem; right: 0.6rem; }
}

.page-card .placeholder {
  aspect-ratio: 3 / 4.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  text-align: center;
  padding: 2rem;
}
.page-card .placeholder strong {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: var(--ink);
}

/* Frecce: solo su dispositivi con puntatore preciso (mouse/trackpad).
   Su touch lo swipe basta, come nell'app Foto. */
.arrow-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem; height: 3rem;
  border: 1px solid var(--line);
  background: var(--void-soft);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  font-size: 1.1rem;
  transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.arrow-btn:hover { border-color: var(--signal); color: var(--signal); }
.arrow-btn.prev { left: 1.25rem; }
.arrow-btn.next { right: 1.25rem; }
.arrow-btn:disabled { opacity: 0.2; cursor: default; }
.arrow-btn:disabled:hover { border-color: var(--line); color: var(--text); }

@media (pointer: coarse) {
  .arrow-btn { display: none; }
}

.reader-hud {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(10,10,15,0.95), rgba(10,10,15,0));
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-dim);
  pointer-events: none;
}
.progress-track {
  width: 140px;
  height: 2px;
  background: var(--line);
  position: relative;
}
.progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: var(--cobalt-bright);
  width: 2%;
  transition: width 0.15s ease;
}

.counter { min-width: 5.5rem; text-align: center; }
.counter .current { color: var(--cobalt-bright); }

/* Tastino audio: isolato in basso a destra, staccato dal contatore/barra
   di avanzamento che restano centrati. */
.hud-corner {
  position: absolute;
  right: 1.5rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  pointer-events: auto;
}

/* ---------- Scelta colonna sonora: due tasti (ON/OFF) affiancati, grandi,
   all'altezza del pollice (comodo da toccare tenendo il telefono con una
   mano), centrati sullo schermo — non un'icona piccola in un angolo.
   Compaiono insieme all'apertura, e con un tap su uno dei due spariscono
   entrambi per sempre: da quel momento la scelta vale per tutta la
   lettura (se ON, il sottofondo cambia da solo passando da un episodio
   all'altro). Spenti di default perché i browser bloccano comunque
   l'audio automatico. ---------- */
.sound-prompt {
  position: fixed;
  left: 50%;
  bottom: 29%;
  transform: translate(-50%, 0);
  z-index: 90;
  display: flex;
  gap: 0.7rem;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.sound-prompt.dismissed {
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
}
.sound-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 1.05rem 1.4rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  transition: background 0.15s, border-color 0.15s;
}
.sound-choice span { font-size: 0.85rem; font-weight: 700; }
.sound-choice.on {
  color: #FFFFFF;
  background: var(--signal);
  border: 1px solid var(--signal);
}
.sound-choice.on:hover { background: #ff7440; border-color: #ff7440; }
.sound-choice.off {
  color: var(--text);
  background: var(--void-soft);
  border: 1px solid var(--line);
}
.sound-choice.off:hover { border-color: var(--text-dim); }
@media (max-width: 480px) {
  .sound-prompt { bottom: 27%; gap: 0.5rem; }
  .sound-choice { font-size: 0.74rem; padding: 0.9rem 1.05rem; }
  .sound-choice span { font-size: 0.74rem; }
}
@media (max-width: 360px) {
  .sound-choice span { display: none; } /* resta solo l'icona, per stare affiancati anche su schermi stretti */
}

/* ---------- Tendina di iscrizione (gate email dopo Ep.4) ---------- */

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(10, 10, 15, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.gate-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.gate-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--void-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--signal);
  padding: 2.75rem 2.25rem 2.25rem;
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.gate-overlay.visible .gate-card { transform: translateY(0); }

.gate-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  width: 2rem; height: 2rem;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.gate-close:hover { color: var(--text); }

.gate-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.85rem;
}

.gate-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 1rem;
  padding-right: 1.25rem;
}

.gate-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 1.85rem;
}

.gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.gate-form input[type="email"] {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  background: var(--void);
  border: 1px solid var(--line);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.gate-form input[type="email"]::placeholder { color: var(--text-dim); }
.gate-form input[type="email"]:focus { border-color: var(--signal); }

.gate-form button {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  padding: 0.95rem 1rem;
  background: var(--signal);
  border: 1px solid var(--signal);
  color: var(--void);
  cursor: pointer;
  transition: background 0.15s;
}
.gate-form button:hover { background: #ff7440; }
.gate-form button:disabled { opacity: 0.6; cursor: default; }

/* Secondario rispetto al form email (che è già il CTA principale): solo
   un piccolo link testuale, senza bordo/bottone, per non competere
   visivamente con "Continua a leggere". */
.gate-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.4rem 0;
  margin-top: 0.6rem;
  transition: color 0.15s;
}
.gate-instagram:hover { color: var(--text); }
.gate-instagram-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

/* Niente opacity qui sopra: text-dim è già abbastanza discreto da solo —
   ridurne ancora la trasparenza scendeva sotto la soglia di contrasto
   leggibile (WCAG AA) su testo così piccolo. */
.gate-disclaimer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  color: var(--text-dim);
  margin-top: 1.25rem;
  text-align: center;
}

.gate-success {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  text-align: center;
  padding: 0.5rem 0 0.25rem;
  display: none;
}
.gate-success.visible { display: block; }