/* Pagina: Il mio fumetto (fumetto.html) */

/* Sfondo di tutta la pagina (anche dietro al logo): 103.png al posto del pattern grigio.
   Sovrascrive la variabile --bg-image definita in common.css, sia per il tema chiaro che scuro. */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --bg-image: url('../images/103.png');
}

#page-reader {
  padding: var(--space-8) var(--space-4);
}

.comic-reader { display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; align-items: center; gap: var(--space-4); min-height: 70vh; }

.reader-button { width: 72px; height: 72px; margin-inline: auto; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; font-size: 3rem; line-height: 1; transition: background var(--transition), transform var(--transition); }

.reader-button:hover, .reader-button:focus-visible { background: var(--color-surface); transform: scale(1.04); outline: none; }

.comic-stage { max-width: 700px; width: 100%; margin-inline: auto; }

.comic-stage img { aspect-ratio: 3 / 4; object-fit: contain; }

.comic-indicator { text-align: center; margin-top: var(--space-4); color: var(--color-text); font-size: var(--text-lg);; font-weight: bold; }

.reader-controls-mobile { display: none; }

@media (max-width: 680px) {
  .comic-reader { grid-template-columns: 1fr; }
  .reader-button { width: 64px; height: 64px; }
  .reader-controls-mobile { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
  .comic-reader > .reader-button { display: none; }
  .comic-indicator { text-align: center; }
}