/* ==========================================================================
   Flipbook Reader — stylesheet
   Adapted from the original 3D flipbook demo, retuned for dynamic
   WordPress content set in Bengali (Tiro Bangla).
   ========================================================================== */

:root{
  --room-dark:#0d0a08;
  --room-mid:#1e1610;
  --cover:#5c1a24;
  --cover-dark:#3e1119;
  --cover-hi:#7a2530;
  --paper:#f4ecd8;
  --paper-alt:#efe3c8;
  --paper-edge:#d8c69f;
  --ink:#2a2118;
  --ink-soft:#5a4d3c;
  --gold:#b68a3b;
  --gold-bright:#d9b56a;
  --shadow:rgba(8,5,3,0.6);
  --font-bengali:'Tiro Bangla', 'Noto Serif Bengali', 'EB Garamond', Georgia, serif;
  --font-mono:'JetBrains Mono', monospace;
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:var(--room-dark);
  font-family:var(--font-bengali);
}
body{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(ellipse 1400px 900px at 50% 46%, var(--room-mid) 0%, var(--room-dark) 72%),
    var(--room-dark);
  position:relative;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

.floor-shadow{
  position:absolute;
  left:50%; bottom:2%;
  width:min(90vw, 1100px);
  height:70px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 74%);
  filter:blur(2px);
  pointer-events:none;
  z-index:0;
}

.stage{
  position:relative;
  width:100vw;
  height:100vh;
  padding:clamp(10px, 2.6vh, 34px) clamp(8px, 2.6vw, 34px);
  perspective:3200px;
  z-index:1;
}

.book{
  position:relative;
  width:100%;
  height:100%;
  max-width:1500px;
  margin:0 auto;
  transform:rotateX(1.4deg);
  transform-style:preserve-3d;
}

.back-board{
  position:absolute;
  inset:-8px -10px;
  background:linear-gradient(180deg, var(--cover-hi), var(--cover) 40%, var(--cover-dark));
  border-radius:10px;
  box-shadow:0 30px 70px var(--shadow), 0 2px 0 rgba(255,255,255,.04) inset;
  z-index:-3;
}

.end-panel{
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    var(--paper-alt);
  border-radius:2px;
  box-shadow:inset 0 0 60px rgba(90,60,30,.12);
  z-index:-1;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .5s ease;
}
.end-panel.visible{ opacity:1; }
.end-panel.left{ left:0; border-radius:2px 0 0 2px; }
.end-panel.right{ right:0; border-radius:0 2px 2px 0; }
.end-panel .plate{ text-align:center; color:var(--ink-soft); opacity:.55; }
.end-panel .plate .rule{ width:34px; height:1px; background:var(--ink-soft); margin:8px auto; opacity:.6; }
.end-panel .plate span{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.gutter{
  position:absolute;
  left:50%; top:0; bottom:0;
  width:min(4%, 46px);
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.32) 48%, rgba(0,0,0,.32) 52%, transparent);
  z-index:600;
  pointer-events:none;
}

/* single-page mode: no spread chrome */
.book.single-mode .gutter,
.book.single-mode .end-panel{ display:none; }

.leaves{ position:absolute; inset:0; transform-style:preserve-3d; }

/* ---- double-page (spread) leaf ---- */
.leaf{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
}
.leaf .face.back{ transform:rotateY(180deg); }

/* ---- single full-width page ---- */
.spage{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
}

.leaf.dragging, .spage.dragging{ transition:none !important; }
.leaf.animating, .spage.animating{ transition:transform .64s cubic-bezier(.4,.05,.2,1); }

.face{
  position:absolute;
  inset:0;
  background:var(--paper);
  backface-visibility:hidden;
  overflow:hidden;
  box-shadow:0 10px 34px var(--shadow);
  border-radius:2px 6px 6px 2px;
}
.face::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 96% 50%, rgba(0,0,0,.09), transparent 34%),
    radial-gradient(ellipse at 4% 50%, rgba(0,0,0,.09), transparent 34%);
  pointer-events:none;
}
.face::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,calc(var(--f,0)*.32)) 55%, rgba(0,0,0,0) 100%);
  opacity:var(--f,0);
  pointer-events:none;
}

.page-inner{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:clamp(26px,7vh,70px) clamp(20px,5.4vw,64px) clamp(18px,4vh,40px);
}

.cover-face{ background:radial-gradient(130% 150% at 30% 8%, var(--cover-hi), var(--cover) 55%, var(--cover-dark) 100%); }
.cover-face .page-inner{ color:var(--gold-bright); align-items:center; text-align:center; justify-content:center; }
.cover-face .cover-rule{ width:clamp(40px,6vw,64px); height:2px; background:var(--gold); margin:18px auto; opacity:.8; }
.cover-face h1{
  font-family:var(--font-bengali);
  font-weight:700;
  font-size:clamp(1.5rem, 4.4vw, 2.6rem);
  letter-spacing:.01em;
  margin:0 0 8px;
  line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.cover-face .sub{ font-style:italic; font-size:clamp(.85rem,1.6vw,1.1rem); color:#e7cf9c; opacity:.85; margin:0; }
.cover-face .author{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:clamp(.6rem,1vw,.72rem);
  letter-spacing:.1em;
  color:#c9ac6f;
  opacity:.8;
}
.cover-face .emblem{
  width:clamp(38px,5vw,52px); height:clamp(38px,5vw,52px);
  border:1.5px solid var(--gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  opacity:.85;
}
.cover-face .emblem svg{ width:46%; height:46%; }

.end-face{ background:var(--cover-dark); }
.end-face .page-inner{ color:var(--gold-bright); align-items:center; justify-content:center; text-align:center; }

.page-eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(.56rem,.9vw,.66rem);
  letter-spacing:.12em;
  color:var(--gold);
  opacity:.75;
  margin:0 0 clamp(8px,1.6vh,16px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---- typography for paginated content (rendered inside .page-body,
   and mirrored by the off-screen .page measuring box in flipbook.js) ---- */
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6{
  font-family:var(--font-bengali);
  font-weight:700;
  font-size:clamp(1.05rem, 2.1vw, 1.5rem);
  color:var(--ink);
  margin:0 0 clamp(10px,1.8vh,18px);
  line-height:1.35;
}
.page p{
  font-family:var(--font-bengali);
  font-size:clamp(.88rem, 1.35vw, 1.08rem);
  line-height:1.9;
  color:var(--ink);
  margin:0 0 1em;
}
.page ul, .page ol{
  font-family:var(--font-bengali);
  font-size:clamp(.88rem, 1.35vw, 1.08rem);
  line-height:1.8;
  color:var(--ink);
  margin:0 0 1em;
  padding-inline-start:1.4em;
}
.page blockquote{
  margin:0 0 1em;
  padding:.2em 0 .2em 1em;
  border-left:3px solid var(--gold);
  font-style:italic;
  color:var(--ink-soft);
}
.page table{
  width:100%;
  border-collapse:collapse;
  font-size:.85em;
  margin:0 0 1em;
}
.page table th, .page table td{
  border:1px solid var(--paper-edge);
  padding:.4em .6em;
  text-align:left;
}
.page figure{ margin:0 0 1em; }
.page img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:2px;
}
.page figcaption{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--ink-soft);
  text-align:center;
  margin-top:.4em;
  opacity:.8;
}

.page-body{ flex:1; overflow:hidden; }
.page-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:clamp(.6rem,.9vw,.68rem);
  color:var(--ink-soft);
  letter-spacing:.05em;
  padding-top:10px;
  border-top:1px solid rgba(42,33,24,.15);
}

.ribbon{
  position:absolute;
  top:-6px; right:14%;
  width:clamp(11px,1.4vw,16px);
  height:clamp(46px,7vh,64px);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  z-index:5;
  pointer-events:none;
}

/* ---- UI chrome ---- */
.ui{ position:absolute; inset:0; pointer-events:none; z-index:700; }

.arrow-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:clamp(34px,4.2vw,46px); height:clamp(34px,4.2vw,46px);
  border-radius:50%;
  background:rgba(20,14,10,.35);
  backdrop-filter:blur(6px);
  border:1px solid rgba(214,178,102,.35);
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
  cursor:pointer;
  color:var(--gold-bright);
  transition:background .2s, transform .15s, opacity .2s;
}
.arrow-btn:hover{ background:rgba(214,178,102,.18); }
.arrow-btn:active{ transform:translateY(-50%) scale(.92); }
.arrow-btn[disabled]{ opacity:.2; pointer-events:none; }
.arrow-btn.prev{ left:clamp(6px,1.6vw,22px); }
.arrow-btn.next{ right:clamp(6px,1.6vw,22px); }
.arrow-btn svg{ width:44%; height:44%; }

.progress-wrap{
  position:absolute;
  left:50%; bottom:clamp(10px,2vh,22px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  pointer-events:none;
}
.progress-label{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:#a58a58;
  background:none; border:none; padding:2px 8px; margin:0;
  cursor:pointer; pointer-events:auto; border-radius:10px;
  transition:background .15s, color .15s;
}
.progress-label:hover, .progress-label:focus-visible{ background:rgba(214,178,102,.16); color:var(--gold-bright); outline:none; }
.progress-track{
  width:min(40vw, 220px); height:2px; background:rgba(182,138,59,.25); border-radius:2px; overflow:hidden;
  cursor:pointer; pointer-events:auto; position:relative;
}
/* wider invisible hit-area so the thin 2px bar is still easy to click/tap */
.progress-track::after{ content:""; position:absolute; inset:-8px 0; }
.progress-fill{ height:100%; background:var(--gold-bright); transition:width .5s ease; }

.jump-popover{
  position:absolute;
  bottom:calc(100% + 10px);
  left:50%; transform:translateX(-50%) translateY(6px);
  display:flex; align-items:center; gap:6px;
  background:rgba(20,14,10,.92);
  backdrop-filter:blur(8px);
  border:1px solid rgba(214,178,102,.35);
  border-radius:10px;
  padding:7px 8px;
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease;
  pointer-events:none;
  z-index:10;
}
.jump-popover.open{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.jump-popover input{
  width:56px;
  font-family:var(--font-mono);
  font-size:.72rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(214,178,102,.3);
  border-radius:6px;
  color:var(--gold-bright);
  padding:4px 6px;
  text-align:center;
}
.jump-popover input::-webkit-outer-spin-button,
.jump-popover input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.jump-popover input:focus{ outline:none; border-color:var(--gold-bright); }
.jump-popover button{
  font-family:var(--font-bengali);
  font-size:.72rem;
  background:var(--gold-bright);
  color:#241a0f;
  border:none;
  border-radius:6px;
  padding:5px 10px;
  cursor:pointer;
  font-weight:600;
}
.jump-popover button:hover{ filter:brightness(1.08); }

.hint{
  position:absolute;
  top:clamp(10px,2vh,20px); left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.06em;
  color:#8a7452;
  white-space:nowrap;
  opacity:.75;
  transition:opacity .6s ease;
  pointer-events:none;
}
.hint.hidden{ opacity:0; }

@media (hover:hover){ .book{ cursor:pointer; } }
@media (max-width:640px){ .arrow-btn{ display:none; } }

/* Manual chapter/page-break marker (see flipbook.js: PAGE_BREAK_CLASS).
   It's consumed during pagination and never actually appears in a page's
   output, but this hides it defensively in case it's ever visible before
   the JS has run (e.g. no-JS fallback, slow script load). */
.flipbook-page-break{ display:none !important; }