/* MYSTES premium page-turn reader */
.reader-text-stage.book-flip-stage{position:relative;perspective:1800px;padding:30px clamp(10px,3vw,42px);background:radial-gradient(ellipse at center,#17212b 0%,#080d13 72%);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.reader-text-stage.book-flip-stage.is-dragging{cursor:grabbing}
.book-spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1280px;min-height:clamp(620px,72vw,900px);margin:0 auto;background:#e9dfc8;color:#20252b;box-shadow:0 24px 65px #000a;border-radius:3px;overflow:visible;transform-style:preserve-3d}
.book-spread:before{content:"";position:absolute;z-index:3;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:linear-gradient(90deg,#5d5140aa,#f5ebd6 35%,#7b6b56aa 55%,#342e25aa);pointer-events:none}
.book-leaf{position:relative;min-width:0;padding:clamp(25px,4vw,58px) clamp(20px,4vw,52px);font-family:Georgia,'Times New Roman',serif;font-size:1.08rem;line-height:1.82;overflow:hidden;background:linear-gradient(90deg,#d8ccb2 0%,#f0e7d4 10%,#f4ecd9 100%);color:#292820}
.book-leaf.right{background:linear-gradient(90deg,#e0d4bd 0%,#f2e9d7 12%,#f5eddd 100%)}
.book-leaf.left{box-shadow:inset -14px 0 22px -22px #32271a}.book-leaf.right{box-shadow:inset 14px 0 22px -22px #32271a}
.book-leaf:after{content:"";position:absolute;left:18%;right:18%;bottom:26px;height:1px;background:#a99c83;opacity:.65}
.book-leaf p{margin:0 0 1em;overflow-wrap:anywhere}
.book-leaf .book-page-number{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:11px Inter,Arial,sans-serif;color:#756b5a;letter-spacing:.12em}
.book-leaf.is-blank{background:linear-gradient(90deg,#d9cdb5,#f0e7d4)}
.book-flip-stage.flip-next .book-spread{animation:bookFlipNext .48s ease both;transform-origin:left center}.book-flip-stage.flip-prev .book-spread{animation:bookFlipPrev .48s ease both;transform-origin:right center}
@keyframes bookFlipNext{0%{transform:rotateY(0)}45%{transform:rotateY(-10deg) scale(.985)}100%{transform:rotateY(0)}}@keyframes bookFlipPrev{0%{transform:rotateY(0)}45%{transform:rotateY(10deg) scale(.985)}100%{transform:rotateY(0)}}
.book-flip-hint{display:flex;justify-content:space-between;gap:12px;max-width:1280px;margin:12px auto 0;color:#91a4b2;font:11px Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.reader-text-stage.book-flip-stage #book-page{display:none}.reader-text-stage.book-flip-stage .reader-loading{z-index:5}
.reader-text-stage.book-flip-stage.night .book-spread,.reader-text-stage.book-flip-stage.night .book-leaf{background:#171c23;color:#dbe4e8}.reader-text-stage.book-flip-stage.night .book-spread:before{background:linear-gradient(90deg,#080a0d,#303942 35%,#07090c 55%,#1d232a)}.reader-text-stage.book-flip-stage.night .book-leaf:after{background:#59636c}
@media(max-width:680px){.reader-text-stage.book-flip-stage{padding:12px 8px}.book-spread{grid-template-columns:minmax(0,1fr);min-height:clamp(620px,82svh,980px);max-width:620px}.book-leaf.left{display:none}.book-spread:before{display:none}.book-leaf{padding:28px 24px;font-size:1rem;line-height:1.75}.book-leaf.right{background:linear-gradient(90deg,#d8ccb2 0%,#f4ecd9 12%,#f4ecd9 100%)}.book-leaf.right:before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(90deg,#9e8e73aa,transparent);pointer-events:none}.book-flip-hint{font-size:9px;letter-spacing:.06em}.reader-text-stage.book-flip-stage.night .book-leaf.right{background:#171c23}}
@media(prefers-reduced-motion:reduce){.book-flip-stage.flip-next .book-spread,.book-flip-stage.flip-prev .book-spread{animation:none}}

/* Ensure the complete open-book spread is visible; override legacy fixed-height text-reader rules. */
.reader-text-stage.book-flip-stage{height:auto!important;min-height:0!important;max-width:none!important;overflow:visible!important;overflow-y:visible!important;box-sizing:border-box!important;}
.reader-text-stage.book-flip-stage .book-spread{height:clamp(680px,70vh,900px);min-height:clamp(680px,70vh,900px);box-sizing:border-box;}
.reader-text-stage.book-flip-stage .book-leaf{box-sizing:border-box;overflow-y:auto;}
@media(max-width:680px){.reader-text-stage.book-flip-stage{height:auto!important;min-height:0!important;overflow:visible!important;}.reader-text-stage.book-flip-stage .book-spread{height:clamp(620px,78svh,900px);min-height:clamp(620px,78svh,900px);}.reader-text-stage.book-flip-stage .book-leaf.right{overflow-y:auto;}}

/* Highlight every matching search term in the visible book pages. */
.book-search-highlight{background:#ffe66d!important;color:#151515!important;padding:0 .08em;border-radius:2px;box-shadow:0 0 0 1px rgba(255,230,109,.35);}


/* Realistic leaf turn overlay: preserve live text underneath and animate a temporary copy of the outgoing page. */
.book-spread{isolation:isolate;overflow:visible}
.book-leaf{backface-visibility:hidden;transform-style:preserve-3d}
.page-turn-overlay{position:absolute!important;top:0;bottom:0;width:50%;z-index:6;margin:0!important;overflow:hidden!important;pointer-events:none;backface-visibility:hidden;transform-style:preserve-3d;box-shadow:0 0 24px #17110b33!important}
.page-turn-overlay.is-forward{left:50%;transform-origin:left center;animation:pageCurlForward .72s cubic-bezier(.22,.68,.16,1) both}
.page-turn-overlay.is-backward{left:0;transform-origin:right center;animation:pageCurlBackward .72s cubic-bezier(.22,.68,.16,1) both}
.page-turn-overlay:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(90deg,#b9aa8d 0%,#eee4d0 10%,#f8f0df 38%,#d6c8ad 100%);box-shadow:inset 0 0 24px #75664d30}
.page-turn-overlay:after{display:none}
.page-turn-overlay.is-forward:before{background:linear-gradient(270deg,#b9aa8d 0%,#eee4d0 10%,#f8f0df 38%,#d6c8ad 100%)}
@keyframes pageCurlForward{0%{transform:rotateY(0deg);filter:brightness(1);box-shadow:0 0 0 #0000}38%{filter:brightness(.88);box-shadow:12px 0 28px #0005}72%{filter:brightness(.96);box-shadow:4px 0 15px #0003}100%{transform:rotateY(-180deg);filter:brightness(1);box-shadow:0 0 0 #0000}}
@keyframes pageCurlBackward{0%{transform:rotateY(0deg);filter:brightness(1)}38%{filter:brightness(.88);box-shadow:-12px 0 28px #0005}72%{filter:brightness(.96);box-shadow:-4px 0 15px #0003}100%{transform:rotateY(180deg);filter:brightness(1)}}
.book-flip-stage.flip-next .book-spread,.book-flip-stage.flip-prev .book-spread{animation:none}
@media(max-width:680px){.page-turn-overlay{left:0!important;width:100%;transform-origin:left center!important}.page-turn-overlay.is-backward{transform-origin:left center!important}.page-turn-overlay.is-forward{animation:pageCurlForward .68s cubic-bezier(.22,.68,.16,1) both}.page-turn-overlay.is-backward{animation:pageCurlForward .68s cubic-bezier(.22,.68,.16,1) both}}
@media(prefers-reduced-motion:reduce){.page-turn-overlay{display:none!important;animation:none!important}}


/* Stronger, clearly visible page curl with a curved edge shadow and paper reverse. */
.book-flip-stage{perspective:2400px!important;perspective-origin:50% 45%}
.book-spread{transform-style:preserve-3d;isolation:isolate}
.page-turn-overlay{
  z-index:8!important;
  filter:drop-shadow(0 0 0 transparent);
  outline:1px solid rgba(105,85,55,.12);
  will-change:transform,filter;
}
.page-turn-overlay.is-forward{
  left:50%!important;
  width:50%!important;
  transform-origin:left center!important;
  animation:pageCurlForwardStrong .95s cubic-bezier(.2,.72,.16,1) both!important;
}
.page-turn-overlay.is-backward{
  left:0!important;
  width:50%!important;
  transform-origin:right center!important;
  animation:pageCurlBackwardStrong .95s cubic-bezier(.2,.72,.16,1) both!important;
}
.page-turn-overlay:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:10;
  opacity:1;
  pointer-events:none;
  backface-visibility:visible;
  transform:rotateY(180deg);
  background:
    linear-gradient(90deg,rgba(86,66,39,.28),transparent 12%,rgba(255,255,255,.28) 46%,rgba(90,67,37,.18) 100%),
    repeating-linear-gradient(0deg,rgba(105,85,55,.025) 0,rgba(105,85,55,.025) 1px,transparent 1px,transparent 4px),
    linear-gradient(135deg,#f7efde,#e0d2b7 90%);
  box-shadow:inset 0 0 26px rgba(70,48,22,.2);
}
.page-turn-overlay.is-forward:before{background:
  linear-gradient(270deg,rgba(86,66,39,.28),transparent 12%,rgba(255,255,255,.28) 46%,rgba(90,67,37,.18) 100%),
  repeating-linear-gradient(0deg,rgba(105,85,55,.025) 0,rgba(105,85,55,.025) 1px,transparent 1px,transparent 4px),
  linear-gradient(135deg,#f7efde,#e0d2b7 90%)}
.page-turn-overlay:after{
  display:block!important;
  content:"";
  position:absolute;
  z-index:11;
  top:0;
  bottom:0;
  width:30px;
  right:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(55,39,20,.2),rgba(255,255,255,.52),rgba(55,39,20,.13));
  opacity:0;
  animation:pageCurlEdge .95s ease both;
}
.page-turn-overlay.is-backward:after{right:auto;left:0;transform:scaleX(-1)}
@keyframes pageCurlForwardStrong{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);filter:brightness(1) drop-shadow(0 0 0 transparent)}
  18%{transform:rotateY(-24deg) skewY(-1deg) scaleX(.98);filter:brightness(.91) drop-shadow(-8px 5px 7px rgba(0,0,0,.2))}
  48%{transform:rotateY(-112deg) skewY(1deg) scaleX(.92);filter:brightness(.78) drop-shadow(-20px 7px 14px rgba(0,0,0,.42))}
  72%{transform:rotateY(-158deg) skewY(0deg) scaleX(.98);filter:brightness(.9) drop-shadow(-10px 4px 8px rgba(0,0,0,.24))}
  100%{transform:rotateY(-180deg) skewY(0deg) scaleX(1);filter:brightness(1) drop-shadow(0 0 0 transparent)}
}
@keyframes pageCurlBackwardStrong{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);filter:brightness(1)}
  18%{transform:rotateY(24deg) skewY(1deg) scaleX(.98);filter:brightness(.91) drop-shadow(8px 5px 7px rgba(0,0,0,.2))}
  48%{transform:rotateY(112deg) skewY(-1deg) scaleX(.92);filter:brightness(.78) drop-shadow(20px 7px 14px rgba(0,0,0,.42))}
  72%{transform:rotateY(158deg) skewY(0deg) scaleX(.98);filter:brightness(.9) drop-shadow(10px 4px 8px rgba(0,0,0,.24))}
  100%{transform:rotateY(180deg) skewY(0deg) scaleX(1);filter:brightness(1)}
}
@keyframes pageCurlEdge{
  0%,100%{opacity:0}
  25%,65%{opacity:1}
}
@media(max-width:680px){
 .page-turn-overlay.is-forward{left:0!important;width:100%!important;transform-origin:left center!important;animation:pageCurlForwardStrong .82s cubic-bezier(.2,.72,.16,1) both!important}
 .page-turn-overlay.is-backward{left:0!important;width:100%!important;transform-origin:left center!important;animation:pageCurlForwardStrong .82s cubic-bezier(.2,.72,.16,1) both!important}
}
@media(prefers-reduced-motion:reduce){.page-turn-overlay{display:none!important;animation:none!important}}


/* 2026-10: wider desktop reading spread and neutral gray reading environment */
.read-online-page:has(.book-flip-stage) {
  background: #24272b;
}
.read-online-page .reader-text-stage.book-flip-stage {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding: clamp(18px, 2.4vw, 36px) clamp(12px, 2.2vw, 34px) !important;
  background: #34383d !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}
.read-online-page .book-flip-stage .book-spread {
  width: min(100%, 1680px) !important;
  max-width: 1680px !important;
  height: clamp(640px, 76vh, 1080px) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.2) !important;
}
.read-online-page .book-flip-stage .book-leaf {
  min-width: 0;
  padding: clamp(28px, 3.4vw, 58px) clamp(28px, 4vw, 68px);
  font-size: clamp(1rem, 1.18vw, 1.32rem);
  line-height: 1.78;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #b7aa91 transparent;
}
.read-online-page .book-flip-stage .book-flip-hint {
  max-width: 1680px;
  color: #c0c6cc;
}
@media (min-width: 681px) {
  .read-online-page .book-flip-stage .book-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .read-online-page .book-flip-stage .book-leaf.left,
  .read-online-page .book-flip-stage .book-leaf.right {
    display: block;
  }
}
@media (max-width: 900px) and (min-width: 681px) {
  .read-online-page .book-flip-stage .book-spread {
    height: clamp(600px, 72vh, 850px) !important;
  }
  .read-online-page .book-flip-stage .book-leaf {
    padding: 28px clamp(20px, 3vw, 34px);
    font-size: 1rem;
    line-height: 1.7;
  }
}
@media (max-width: 680px) {
  .read-online-page .reader-text-stage.book-flip-stage {
    padding: 12px 10px !important;
    background: #34383d !important;
  }
  .read-online-page .book-flip-stage .book-spread {
    width: 100% !important;
    height: clamp(600px, 78svh, 900px) !important;
    min-height: 0 !important;
  }
  .read-online-page .book-flip-stage .book-leaf.right {
    padding: 28px 25px;
    font-size: 1rem;
  }
}


/* Keep the overall Read Online page black; gray belongs only to the reader interface. */
body.read-online-page { background: #000 !important; }