/* ═══════════════════════════════════════════════════════════════════════════
   Flipbook reader. Two pages side by side like a real open book, with a
   3D page turn. The whole effect is CSS transforms on one moving leaf —
   no per-frame JS — so the browser can run it on the compositor and it
   stays smooth on the cheap Android tablets a lot of these books get read on.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --navy-900:#0B1229; --navy-800:#121A3A; --navy-300:#5C6585; --navy-200:#8A92AC;
  --gold-700:#A8842F; --gold-500:#D6AF57; --gold-100:#FAF3E0;
  --cream-50:#FDFBF5; --cream-100:#F8F3E7; --cream-200:#EFE7D4;
  --ease:cubic-bezier(.22,1,.36,1);
  --flip-ms:520ms;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--navy-900); color:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit}
/* Several elements below are toggled with the `hidden` attribute but also
   carry a class that sets display — a class selector beats the UA's
   `[hidden]{display:none}`, so without this the "hidden" spinner stays
   painted on top of the book. */
[hidden]{display:none !important}

.fb{display:flex; flex-direction:column; height:100vh; height:100dvh}

/* ── Top bar ── */
.fb__top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; flex:none;
  background:rgba(11,18,41,.9); border-bottom:1px solid rgba(214,175,87,.16);
}
.fb__back{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--cream-200); text-decoration:none}
.fb__back:hover{color:var(--gold-500)}
.fb__meta{text-align:center; min-width:0}
.fb__title{font-family:"Fraunces",Georgia,serif; font-weight:700; font-size:1rem; color:var(--cream-50);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb__sub{font-size:11.5px; color:var(--navy-200)}
.fb__tools{display:flex; align-items:center; gap:6px}
.fb__tool{
  width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--cream-200); border:1px solid rgba(214,175,87,.2);
}
.fb__tool:hover{background:rgba(214,175,87,.14); color:#fff}
.fb__tool svg{width:16px;height:16px}

/* ── Stage ── */
.fb__stage{
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  padding:18px; min-height:0;
  /* No perspective here any more: StPageFlip draws the fold into its own
     canvas rather than using CSS 3D, so a perspective on the stage would do
     nothing but create a stray rendering context. */
}
.fb__book{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
/* StPageFlip builds its own canvas, leaves and shadows inside here. It sizes
   itself from this box, so the box must have real dimensions before the
   flipbook is constructed. */
.fb__host{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  touch-action:none;          /* the library handles drag itself */
}
.fb__host canvas{
  display:block;
  border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
/* The library's own wrapper, when it renders in HTML mode. */
.fb__host .stf__parent{margin:0 auto}

/* ── Edge buttons ── */
.fb__edge{
  position:absolute; top:0; bottom:0; width:14%; z-index:20;
  display:flex; align-items:center; justify-content:center;
  color:rgba(253,251,245,.0); transition:color .18s, background .18s;
}
.fb__edge:hover:not(:disabled){color:rgba(253,251,245,.85); background:linear-gradient(90deg, rgba(0,0,0,.22), transparent)}
.fb__edge--r:hover:not(:disabled){background:linear-gradient(270deg, rgba(0,0,0,.22), transparent)}
.fb__edge:disabled{cursor:default}
.fb__edge--l{left:0}
.fb__edge--r{right:0}
.fb__edge svg{width:30px;height:30px}
.fb__edge--l svg{transform:rotate(180deg)}

/* ── Bottom bar ── */
.fb__bottom{
  flex:none; display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 18px 14px; background:rgba(11,18,41,.9); border-top:1px solid rgba(214,175,87,.16);
}
.fb__count{font-size:12.5px; color:var(--navy-200); font-variant-numeric:tabular-nums; min-width:92px; text-align:center}
.fb__scrub{flex:1; max-width:420px; accent-color:var(--gold-500)}

/* ── States ── */
.fb__msg{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:30px; z-index:30; background:var(--navy-900);
}
.fb__msg h2{font-family:"Fraunces",Georgia,serif; font-size:1.4rem}
.fb__msg p{color:var(--navy-200); font-size:14px; max-width:420px; line-height:1.6}
.fb__btn{
  height:42px; padding:0 20px; border-radius:11px; background:var(--gold-500); color:var(--navy-800);
  font-weight:700; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.fb__btn.ghost{background:transparent; color:var(--cream-200); border:1.5px solid rgba(214,175,87,.35)}
.fb__spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(214,175,87,.25); border-top-color:var(--gold-500);
  animation:fbspin .8s linear infinite;
}
@keyframes fbspin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .fb__spinner{animation-duration:2s}
}

/* One page at a time on phones — two would make the text unreadable.
   StPageFlip switches to portrait itself (usePortrait), so this only has to
   tidy the chrome around it. */
@media (max-width:760px){
  .fb__top{padding:10px 12px}
  .fb__title{font-size:.9rem}
  .fb__stage{padding:10px}
}