.reader-scene{
  position:relative; z-index:1;
  width:100%;
  min-height:82vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:10px 16px 20px;
}
.table-plane{
  position:absolute; left:0; right:0; bottom:0; height:48%;
  background:linear-gradient(180deg, transparent 0%, #1c1512 22%, #0c0806 100%);
  z-index:-1;
}
.book-wrap{ position:relative; width:min(86vw, 400px); margin-top:6px; perspective:2200px; touch-action:none; }
.book-shadow{
  position:absolute; left:6%; right:6%; bottom:-22px; height:34px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 72%);
  filter:blur(6px);
  transition:opacity 0.15s ease;
}
.book-stage{
  position:relative; width:100%;
  aspect-ratio: var(--book-ratio, 664/1085);
  transform-style:preserve-3d;
  box-shadow:0 22px 46px -18px rgba(0,0,0,0.7), 0 2px 0 1px rgba(0,0,0,0.15);
  border-radius:2px;
  background:#0e0b09;
  touch-action:none;
  cursor:grab;
}
.book-stage:active{cursor:grabbing;}
.page-layer{position:absolute; inset:0; border-radius:2px; overflow:hidden;}
.page-layer img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.under-layer{z-index:1;}
.flip-layer{
  z-index:2; transform-style:preserve-3d;
  transform-origin:right center;
  will-change:transform;
}
.flip-layer.origin-left{transform-origin:left center;}
.face{position:absolute; inset:0; backface-visibility:hidden; border-radius:2px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);}
.front-face::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.28) 0%, transparent 14%);
  opacity:var(--curl-opacity, 0); pointer-events:none;
}
.flip-layer.origin-left .front-face::after{
  background:linear-gradient(270deg, rgba(0,0,0,0.28) 0%, transparent 14%);
}
.hint-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  font-size:24px; color:rgba(237,227,208,0.8);
  text-shadow:0 2px 6px rgba(0,0,0,0.5);
  opacity:0; transition:opacity 0.25s ease; pointer-events:none;
}
.hint-left{left:10px;} .hint-right{right:10px;}
.book-stage:hover .hint-arrow{opacity:0.5;}

.reader-controls{
  position:relative; z-index:2;
  margin-top:22px;
  display:flex; align-items:center; gap:14px;
  background:rgba(28,22,19,0.85);
  border:1px solid rgba(184,146,90,0.22);
  padding:10px 14px;
  border-radius:999px;
  backdrop-filter:blur(10px);
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(184,146,90,0.3);
  background:transparent; color:var(--parchment);
  font-size:17px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s ease;
}
.icon-btn:hover{background:var(--accent-soft); transform:scale(1.05);}
.icon-btn:disabled{opacity:0.3; cursor:default; transform:none; background:transparent;}

.folio-block{width:140px; text-align:center;}
.folio-edit{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:13px; color:var(--parchment-dim); margin-bottom:6px; direction:ltr;
}
#pageInput{
  width:42px; background:transparent; border:1px solid rgba(184,146,90,0.3);
  border-radius:5px; color:var(--parchment); font-size:13px; text-align:center; padding:3px 2px;
  -moz-appearance:textfield; direction:ltr;
}
#pageInput::-webkit-outer-spin-button, #pageInput::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
#pageInput:focus{outline:none; border-color:var(--accent);}
.progress-rail{width:100%; height:3px; border-radius:3px; background:rgba(128,128,128,0.25); position:relative;}
.progress-fill{position:absolute; right:0; top:0; bottom:0; background:var(--accent); border-radius:3px; width:0%; transition:width 0.35s ease;}

@media (min-width:720px){
  .book-wrap{width:min(42vw, 400px);}
}
@media (max-width:420px){
  .reader-controls{gap:8px; padding:8px 10px;}
  .folio-block{width:104px;}
}