.book-topbar{
  width:100%;
  border-bottom:1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.book-topbar-inner{
  width:100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

@media (max-width: 520px){
  .book-topbar-inner{
    flex-wrap:wrap;
    justify-content:center;
  }
}

.book-stage{
  width:100%;
  flex: 1 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 24px 16px 44px;
}

.book{
  position: relative;
  width: min(980px, 92vw);
  height: min(640px, 72vh);
  perspective: 1600px;

  /* importante: fondo solido uguale al resto */
  background: var(--bg);
  border-radius: 22px;
}

.page{
  position:absolute;
  inset:0;
  border-radius: 22px;
  border: 1px solid var(--line);

  /* FONDO OPACO: non deve trapelare nulla */
  background: var(--bg);
  overflow:hidden;

  transform-style: preserve-3d;
  transform-origin: left center;
  backface-visibility: hidden;
}

.page::before{
  /* leggero “tocco” elegante senza trasparenza reale */
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 400px at 20% 20%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%);
}

.page-inner{
  position: relative;
  height:100%;
  padding: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-meta{
  width:100%;
  max-width: 640px;
}

/* retro pagina opaco per il flip */
.page-back{
  position:absolute;
  inset:0;
  background: var(--bg);
  border-radius: 22px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

/* flip */
.book-flip{
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.page.is-flipping{
  transform: rotateY(-180deg);
}

/* riduzione motion */
@media (prefers-reduced-motion: reduce){
  .book-flip{ transition: none; }
}