/* ================================================================
   ADNU Reader Lite — Stylesheet
   © Christopher Bjarn / ADNU. All rights reserved.
   Unauthorised copying or distribution is prohibited.
================================================================ */

/* ================================================================
   ADNU READER LITE — The Stillin Edition
   Theme: Light greys · Warm cream page · Charcoal chrome
   Admin config at bottom of script block
================================================================ */
:root {
  --chrome:        #1c1c1e;
  --chrome-2:      #252527;
  --chrome-3:      #2e2e30;
  --chrome-border: #3a3a3c;
  --chrome-hover:  #38383a;

  --page-bg:    #f7f5f0;
  --page-text:  #1c1c1e;
  --page-muted: #6e6e73;
  --page-rule:  #d6d3cc;

  --ink:        #1c1c1e;
  --ink-2:      #3a3a3c;
  --blue:       #0a84ff;
  --blue-glow:  rgba(10,132,255,0.14);

  --topbar-h:   56px;
  --footer-h:   60px;

  --font-body: 'Lora', Georgia, serif;
  --font-ui:   'Inter', system-ui, sans-serif;
  --adnu-accent: #3dd68c;
  --r-sm: 5px; --r-md: 10px; --r-lg: 14px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:var(--font-ui);background:var(--chrome);color:#e4e4e6;-webkit-font-smoothing:antialiased;user-select:none}
button{font-family:var(--font-ui);cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#444;border-radius:99px}

/* ================================================================
   DRM SPLASH
================================================================ */
#drm-splash{
  position:fixed;inset:0;z-index:9000;
  background:#111;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;
  font-family:var(--font-ui);
}
.drm-cover{
  width:88px;height:128px;border-radius:5px;object-fit:cover;
  box-shadow:0 10px 40px rgba(0,0,0,.7),3px 0 8px rgba(0,0,0,.4);
  margin-bottom:22px;display:none;
}
.drm-lock{font-size:2.6rem;margin-bottom:16px}
#drm-splash h1{
  font-family:var(--font-body);font-size:1.55rem;font-style:italic;
  color:#f0f0f0;margin-bottom:4px;
}
.drm-by{font-size:0.8rem;color:#666;margin-bottom:18px}
.drm-msg{font-size:0.85rem;color:#999;max-width:320px;line-height:1.6;margin-bottom:22px}
.drm-form{display:flex;flex-direction:column;gap:9px;width:100%;max-width:280px}
.drm-inp{
  background:#1e1e1e;border:1px solid #333;border-radius:8px;
  padding:11px 14px;color:#f0f0f0;font-size:0.85rem;
  font-family:var(--font-ui);outline:none;text-align:center;letter-spacing:.06em;
}
.drm-inp:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
.drm-btn{
  background:#f0f0f0;color:#111;border-radius:8px;
  padding:11px;font-size:0.85rem;font-weight:600;font-family:var(--font-ui);
  transition:background .15s;
}
.drm-btn:hover{background:#fff}
.drm-err{font-size:0.75rem;color:#ff6b6b;display:none}
.drm-foot{font-size:0.65rem;color:#333;margin-top:22px}

/* ================================================================
   SHELL
================================================================ */
#shell{display:flex;flex-direction:column;height:100dvh;opacity:0;transition:opacity .3s ease;position:relative;overflow:hidden}
#shell.on{opacity:1}

/* ── Topbar ── */
#topbar{
  height:var(--topbar-h);flex-shrink:0;
  display:flex;align-items:center;gap:10px;padding:0 14px;
  background:var(--chrome);border-bottom:1px solid var(--chrome-border);
  position:relative;z-index:100;
}

/* ── Cover widget — overflows below topbar, dark-grey frame ── */
/* ── Cover frame — overflows below topbar by exactly 20px on all sides ──
   Book image: 42×62px (150% of original 28×41px)
   Frame:      42 + 20 + 20 = 82px wide,  62 + 20 + 20 = 102px tall
   Topbar is 56px — frame overflows ~46px below the header              */
.cover-mount {
  position: relative;
  flex-shrink: 0;
  /* Reserve only the width the frame needs in the flex row */
  width: 82px;
  height: var(--topbar-h);
  /* Smooth fade when hiding/showing the icon */
  transition: opacity .2s ease, visibility .2s ease;
}
/* Hide the icon immediately when the panel opens */
.cover-mount.panel-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Transparent tap-to-close layer that sits over the reading area */
#cover-tap-overlay {
  position: absolute;
  top: calc(50vh - var(--topbar-h) - 2px); /* starts at the bottom edge of the panel */
  left: 0; right: 0;
  bottom: var(--footer-h);   /* stops above the footer — never covers the controls */
  z-index: 299;        /* just below the cover-panel (z-index 300) */
  background: transparent;
  cursor: pointer;
  display: none;
}

.cover-frame {
  position: absolute;
  top: 0; left: 0;
  width:  83px;   /* 10px + 63px cover + 10px */
  height: 113px;  /* 10px + 93px cover + 10px */
  background: var(--chrome);
  border-radius: 0 0 12px 12px;
  border: 1px solid var(--chrome-border);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  z-index: 101;
  box-shadow:
    0 4px 12px rgba(0,0,0,.22),
    0 8px 20px rgba(0,0,0,.12);
  transition: box-shadow .2s;
}
.cover-frame:hover {
  box-shadow:
    0 6px 18px rgba(0,0,0,.30),
    0 12px 28px rgba(0,0,0,.16);
}

.cover-frame img,
.cover-frame video {
  width: 63px;
  height: 93px;
  border-radius: 3px 4px 4px 3px;
  object-fit: cover;
  display: block;
  box-shadow: 3px 0 8px rgba(0,0,0,.5), -1px 0 3px rgba(0,0,0,.2);
}

/* ── Cover dropdown panel ── */
#cover-panel {
  position: absolute;
  top: calc(var(--topbar-h) + 2px);
  left: 0; right: 0;
  height: calc(50vh - var(--topbar-h) - 2px);
  background: var(--chrome);
  z-index: 300;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform .38s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .38s;
  box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 24px 80px rgba(0,0,0,.3);
  overflow: hidden;
}
#cover-panel.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .38s cubic-bezier(.4,0,.2,1),
    visibility 0s linear 0s;
}

/* Inner wrapper: image left, order buttons bottom-right */
#cover-panel-inner {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 20px 20px 20px 24px;
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}

/* Large cover — left-aligned */
.panel-cover-img {
  max-height: 100%;
  max-width: min(40%, 240px);
  width: auto;
  border-radius: 5px 7px 7px 5px;
  object-fit: cover;
  box-shadow:
    6px 0 24px rgba(0,0,0,.65),
    -2px 0 6px rgba(0,0,0,.25),
    0 10px 36px rgba(0,0,0,.55);
  display: block;
  flex-shrink: 0;
}
#cover-panel.open .panel-cover-img {
  animation: coverReveal .38s ease .05s both;
}
#panel-cover-vid{object-fit:contain;background:#000;height:auto;}

/* Order buttons — pinned to bottom-right of panel */
#cover-order-btns {
  position: absolute;
  bottom: 18px;
  right: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.cover-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--chrome-border);
  color: #ccc;
  background: var(--chrome-2);
  transition: all .15s;
  white-space: nowrap;
}
.cover-order-btn::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.cover-order-btn:hover {
  background: var(--chrome-3);
  color: #e8e8e8;
  border-color: #555;
}
.cover-order-btn--hc {
  color: #e8c97a;
  border-color: rgba(232,201,122,.35);
  background: rgba(232,201,122,.07);
}
.cover-order-btn--hc::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8c97a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
}
.cover-order-btn--hc:hover {
  background: rgba(232,201,122,.15);
  border-color: rgba(232,201,122,.6);
}

@keyframes coverReveal {
  from { transform: scale(.93) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* Close button */
.panel-close {
  position: absolute; top: 10px; right: 12px;
  z-index: 5; /* above #cover-panel-inner (position:relative, later in DOM), which was intercepting clicks */
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: #777; font-size: 0.82rem; cursor: pointer; transition: all .14s;
}
.panel-close:hover { background: rgba(255,255,255,.14); color: #ccc; }

/* ── Split-view: cover panel overlays rarea; smode pads down ── */
#rarea {
  transition: none;
  position: relative; /* so absolute cover-panel is contained */
}
/* Pad scroll content below the cover panel when open */
#smode {
  padding-top: 0;
  transition: padding-top .38s cubic-bezier(.4,0,.2,1);
}
#shell.cover-open #smode {
  padding-top: calc(50vh - var(--topbar-h) - 2px);
}
/* Dark mode panel */
body.dark-mode #cover-panel {
  background: #0d0d0d;
  box-shadow: 0 12px 48px rgba(0,0,0,.85), 0 24px 80px rgba(0,0,0,.55);
}
body.dark-mode .cover-frame {
  background: #0d0d0d;
  border-color: #2a2a2a;
}

.tb-info{flex:1;min-width:0}
.tb-title{font-family:var(--font-body);font-size:0.88rem;font-style:italic;font-weight:500;color:#e4e4e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-author{font-size:0.67rem;color:#666;margin-top:1px}

.sep{width:1px;height:16px;background:var(--chrome-border);flex-shrink:0}

/* View toggle */
#vtoggle{
  display:flex;background:var(--chrome-2);border:1px solid var(--chrome-border);
  border-radius:7px;overflow:hidden;flex-shrink:0;
}
.vt{padding:5px 10px;font-size:0.72rem;font-weight:500;color:#666;
  transition:all .14s;display:flex;align-items:center;gap:4px}
.vt.on{background:#d8d8d8;color:#111}
.vt:not(.on):hover{color:#ccc}

/* ── Progress strip ── */
#pstrip{height:2px;flex-shrink:0;background:var(--chrome-border)}
#pfill{height:100%;width:0%;background:var(--adnu-accent,#c8c8c8);transition:width .4s ease}

/* ── Reading area ── */
#rarea{flex:1;overflow:hidden;position:relative;background:#dddcd7}

/* ================================================================
   SCROLL MODE
================================================================ */
#smode{
  position:absolute;inset:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  background:#dddcd7;
}
#smode.off{display:none}


/* Text content area */
#scontent{
  max-width:680px;width:100%;
  background:var(--page-bg);
  padding:44px 52px 72px;
  user-select:text;
}
@media(max-width:580px){
  #scontent{padding:28px 22px 60px}
}

/* Book typography */
.btext{font-family:var(--font-body);font-size:18px;line-height:1.92;color:var(--page-text);user-select:text}
.btext h1{font-size:1.95rem;font-weight:500;font-style:italic;letter-spacing:-.01em;margin-bottom:.45em;padding-bottom:.45em;border-bottom:1px solid var(--page-rule)}
.btext h2{font-size:0.78rem;font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin:2.2em 0 .7em;color:#555}
.btext h3{font-size:1rem;font-style:italic;font-weight:500;margin:1.5em 0 .4em;color:#444}
.btext p{margin-bottom:1.3em}
.btext blockquote{
  border-left:2px solid var(--page-rule);margin:1.6em 0;
  padding:.5em 0 .5em 1.4em;color:#666;font-style:italic;
}
.btext .divider{text-align:center;margin:2em 0;color:#bbb;letter-spacing:.5em}
.btext .illus{margin:2.2em auto}
.btext .illus img{
  width:100%;border-radius:6px;
  box-shadow:0 4px 22px rgba(0,0,0,.15);display:block;
}
.btext .illus-cap{
  text-align:center;font-size:0.75rem;color:var(--page-muted);
  margin-top:8px;font-style:italic;font-family:var(--font-ui);
}

/* Preview CTA */
.pcta{
  margin:2.5em 0 0;padding:22px 26px;
  background:#f0edea;border:1px solid var(--page-rule);
  border-radius:var(--r-md);text-align:center;
}
.pcta .cta-lbl{font-size:0.68rem;color:var(--page-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;font-family:var(--font-ui)}
.pcta h3{font-family:var(--font-body);font-size:1.05rem;font-style:italic;margin-bottom:7px}
.pcta p{font-size:0.82rem;color:#666;line-height:1.55;font-family:var(--font-ui)}
.pcta-links{margin-top:15px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.cta-a{
  padding:8px 18px;border-radius:8px;font-size:0.79rem;font-weight:500;
  text-decoration:none;transition:all .14s;display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-ui);
}
.cta-pri{background:var(--page-text);color:#fff}
.cta-pri:hover{background:#333}
.cta-sec{border:1px solid var(--page-rule);color:var(--page-muted)}
.cta-sec:hover{border-color:#aaa;color:var(--page-text)}

/* ================================================================
   PAGE TURN MODE
================================================================ */
#pmode{position:absolute;inset:0;display:flex;align-items:stretch;background:#cccbc6}
#pmode.off{display:none}

.pscene{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1800px;
  perspective-origin:50% 42%;
}

.pwrap{
  position:absolute;inset:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding:0;pointer-events:none;  /* padding replaced by JS scale */
}
.pwrap.active{pointer-events:auto}

/* ── Fixed 5.5" × 8.5" page — 528×816px at 96dpi ── */
.ppaper{
  /* Fixed book page size — scaled by JS to fit the available rarea */
  width:  528px;
  height: 816px;
  flex-shrink: 0;
  transform-origin: top center;  /* JS sets transform:scale() */
  background:var(--page-bg);border-radius:2px 4px 4px 2px;
  overflow:hidden;position:relative;
  box-shadow:
    5px 0 16px rgba(0,0,0,.2),
    -1px 0 4px rgba(0,0,0,.08),
    0 6px 24px rgba(0,0,0,.18);
  background-image:
    linear-gradient(to right,rgba(0,0,0,.03) 0%,transparent 4%,transparent 96%,rgba(0,0,0,.02) 100%),
    repeating-linear-gradient(180deg,transparent,transparent 29px,rgba(0,0,0,.016) 29px,rgba(0,0,0,.016) 30px);
}
/* Spine shadow */
.ppaper::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:16px;z-index:2;
  background:linear-gradient(to right,rgba(0,0,0,.07),transparent);pointer-events:none;
}
/* Corner curl */
.ppaper::after{
  content:'';position:absolute;bottom:0;right:0;width:24px;height:24px;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.1) 50%);
}

.pinner{
  padding:20px 44px 30px;
  width:528px;height:816px;overflow:hidden;
  font-family:var(--font-body);font-size:17px;line-height:1.88;
  color:var(--page-text);user-select:text;position:relative;z-index:1;
  box-sizing:border-box;
}

/* Continuation pages: book title centred at top, 15px from edge, 25px below */
.pinner.continuation{
  padding-top:71px;  /* 15px gap + ~31px title row + 25px below title */
  padding-bottom:30px;
}
.pinner.continuation::before{
  content: attr(data-title);
  position:absolute;
  top:15px;
  left:0;right:0;
  text-align:center;
  font-family:var(--font-body);
  font-size:0.72rem;
  font-style:italic;
  color:var(--page-muted,#aaa);
  letter-spacing:.04em;
  pointer-events:none;
  z-index:2;
}
#tocbtn{display:flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-md);
  font-size:0.81rem;font-weight:600;color:#ccc;background:var(--chrome-2);border:1px solid var(--chrome-border);
  transition:all .15s;cursor:pointer}
#tocbtn:hover{background:var(--chrome-3);color:#e8e8e8;border-color:#555}
#tocnum{font-size:15px;font-weight:700;line-height:1;color:inherit;font-family:var(--font-ui)}
#tocpanel{position:absolute;bottom:64px;right:16px;left:auto;top:auto;z-index:50;background:#1d2025;border:1px solid #34383f;border-radius:10px;
  max-height:60vh;overflow-y:auto;min-width:220px;max-width:min(320px,90vw);box-shadow:0 12px 32px rgba(0,0,0,.5)}
@media (max-width:480px){
  #tocbtn span#tocnum{display:none}
  #tocbtn{padding:8px}
}
#tocpanel.hidden{display:none}
.toc-item{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:none;color:#c8cdd6;
  font-size:13px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.06)}
.toc-item:hover{background:rgba(255,255,255,.06)}
.toc-item.current{color:#fff;font-weight:700}
.toc-item-locked{display:block;width:100%;text-align:left;padding:10px 14px;background:none;border:none;
  color:#5a5f68;font-size:13px;cursor:default;border-bottom:1px solid rgba(255,255,255,.06);user-select:none}
.toc-num{display:inline-block;min-width:22px;color:#888;margin-right:6px}
body.dark-mode #tocpanel{background:#0d0d0d}

.pinner h1{font-size:1.55rem;font-style:italic;font-weight:500;margin-bottom:.4em;padding-bottom:.4em;border-bottom:1px solid var(--page-rule)}
.pinner h2{font-size:0.75rem;font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;margin:1.6em 0 .5em;color:#555}
.pinner p{margin-bottom:1.1em}
.pinner .divider{text-align:center;color:#ccc;margin:1.5em 0;letter-spacing:.5em}

/* IMAGE page — zero padding, full bleed, fixed at page size */
.pinner.pinner-image{
  padding:0 !important;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.pinner.pinner-image img,
.pinner.pinner-image svg {
  width:528px !important;
  height:816px !important;
  max-width:528px !important;
  max-height:816px !important;
  object-fit:cover !important;
  display:block;flex-shrink:0;
}

/* Images inside TEXT pages — constrained, proportional */
.pinner:not(.pinner-image) img,
.pinner:not(.pinner-image) svg {
  max-width:100% !important;
  max-height:300px !important;
  width:auto !important;height:auto !important;
  display:block;object-fit:contain;margin:8px auto;
}

/* Footer inside page — chapter label only now (page number moved to top-right) */
.pfooter{
  position:absolute;bottom:13px;left:0;right:0;
  display:flex;align-items:center;justify-content:flex-start;
  padding:0 44px;z-index:3;pointer-events:none;
}
.pnum{position:absolute;top:14px;right:20px;z-index:3;pointer-events:none;}
.pnum,.pchap{font-size:0.85rem;color:#777;font-family:var(--font-ui);letter-spacing:.05em;font-weight:600}
.pchap:empty{display:none}

/* Scroll-view chapter pill — floats over the reading area during narration.
   Bottom-left on desktop/tablet; moved to top-left on phones where the
   bottom strip is cramped. */
.schap{
  position:absolute;left:18px;bottom:18px;z-index:30;
  padding:6px 13px;border-radius:999px;pointer-events:none;
  background:rgba(22,22,24,.72);color:#fff;
  font:600 0.72rem var(--font-ui);letter-spacing:.05em;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  opacity:0;transform:translateY(7px);
  transition:opacity .35s ease, transform .35s ease;
}
.schap.show{opacity:1;transform:none}
@media (max-width:1024px){ .schap{left:14px;bottom:16px} }
@media (max-width:600px){
  .schap{left:12px;bottom:auto;top:12px;font-size:0.66rem;padding:5px 11px}
}

/* ── 3D flip animations ── */
/* ── 3D page-turn — bending sheet (skew = flex, scaleX = foreshorten,
      brightness = curl shading). 0.5s duration kept to match JS timing. ── */
@keyframes fwOut{
  0%  {transform:rotateY(0)        skewY(0)     scaleX(1);   filter:brightness(1);   opacity:1}
  50% {transform:rotateY(-90deg)   skewY(2.4deg) scaleX(.955);filter:brightness(.84); opacity:.92}
  100%{transform:rotateY(-180deg)  skewY(0)     scaleX(1);   filter:brightness(.96); opacity:0}
}
@keyframes fwIn{
  0%  {transform:rotateY(180deg)   skewY(0)      scaleX(1);   filter:brightness(.96); opacity:0}
  45% {transform:rotateY(68deg)    skewY(-2.2deg) scaleX(.955);filter:brightness(.9);  opacity:.85}
  100%{transform:rotateY(0)        skewY(0)      scaleX(1);   filter:brightness(1);   opacity:1}
}
@keyframes fbOut{
  0%  {transform:rotateY(0)        skewY(0)      scaleX(1);   filter:brightness(1);   opacity:1}
  50% {transform:rotateY(90deg)    skewY(-2.4deg) scaleX(.955);filter:brightness(.84); opacity:.92}
  100%{transform:rotateY(180deg)   skewY(0)      scaleX(1);   filter:brightness(.96); opacity:0}
}
@keyframes fbIn{
  0%  {transform:rotateY(-180deg)  skewY(0)      scaleX(1);   filter:brightness(.96); opacity:0}
  45% {transform:rotateY(-68deg)   skewY(2.2deg)  scaleX(.955);filter:brightness(.9);  opacity:.85}
  100%{transform:rotateY(0)        skewY(0)      scaleX(1);   filter:brightness(1);   opacity:1}
}

.fw-out{animation:fwOut .5s cubic-bezier(.42,0,.26,1) forwards;transform-origin:left center;will-change:transform,filter}
.fw-in {animation:fwIn  .5s cubic-bezier(.32,.1,.4,1) forwards;transform-origin:left center;will-change:transform,filter}
.fb-out{animation:fbOut .5s cubic-bezier(.42,0,.26,1) forwards;transform-origin:right center;will-change:transform,filter}
.fb-in {animation:fbIn  .5s cubic-bezier(.32,.1,.4,1) forwards;transform-origin:right center;will-change:transform,filter}

/* Light sheen + soft shadow that sweeps across the leaf as it bends */
.pinner::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 38%, rgba(255,255,255,.30) 49%,
    rgba(0,0,0,.12) 58%, rgba(0,0,0,0) 70%);
  background-size:260% 100%;background-position:100% 0;
}
.pwrap.fw-out .pinner::after{animation:sheenFw .5s ease forwards}
.pwrap.fb-out .pinner::after{animation:sheenFb .5s ease forwards}
@keyframes sheenFw{0%{opacity:0;background-position:100% 0}30%{opacity:1}100%{opacity:0;background-position:-30% 0}}
@keyframes sheenFb{0%{opacity:0;background-position:-30% 0}30%{opacity:1}100%{opacity:0;background-position:100% 0}}

/* Nav arrows */
/* ── Page turn arrow icons ────────────────────────────────────
   Always opacity:0. Fade to 0.25 only when the hover zone for
   that side is entered. Never both at once.                   */
.parrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,20,.68);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.09);color:#ddd;
  pointer-events:none;  /* clicks go to the zone, not the icon */
  opacity:0;
  transition:opacity .28s ease;
}
.parrow.hover-show{ opacity:.25; }
body.adnu-demo-shell .parrow{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
body.adnu-demo-shell .parrow.hover-show{ opacity:.55; }
.parrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.parrow.lft{left:16px}
.parrow.rgt{right:16px}
@keyframes arrowDim{to{opacity:.05}} /* kept for compat */

/* ── Hover zones — invisible click/hover targets ──────────────
   Each zone covers 35% of the page width, full height.
   pointer-events:auto so they receive mouse events.           */
.pturn-zone{
  position:absolute;top:0;bottom:0;width:35%;
  z-index:15;cursor:pointer;
}
.pturn-zone.lft{ left:0; }
.pturn-zone.rgt{ right:0; }

/* Swipe hint */
.swipe-hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:0.68rem;color:rgba(0,0,0,.28);pointer-events:none;white-space:nowrap;
  animation:shFade 4s ease 2s both;
}
@keyframes shFade{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}

/* ================================================================
   FOOTER CONTROLS
================================================================ */
#fcontrols{
  height:var(--footer-h);flex-shrink:0;
  display:flex;align-items:center;gap:8px;padding:0 14px;
  background:var(--chrome);border-top:1px solid var(--chrome-border);
  position:relative;
  z-index:400;  /* above cover-tap-overlay (299) and cover-panel (300) */
}

.fc-grp{display:flex;align-items:center;gap:5px}
.fc-btn{
  padding:5px 8px;border-radius:var(--r-sm);font-size:0.79rem;font-weight:600;
  color:#888;border:1px solid var(--chrome-border);transition:all .13s;
}
.fc-btn:hover{color:#ddd;border-color:#555}
.fc-lbl{font-size:0.70rem;color:#555;min-width:28px;text-align:center}

.fsep{width:1px;height:16px;background:var(--chrome-border);flex-shrink:0}
.fspace{flex:1}

/* TTS button */
#ttsbtn,#stopbtn,#bmbtn{
  display:flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:var(--r-md);
  font-size:0.81rem;font-weight:600;
  color:#ccc;background:var(--chrome-2);border:1px solid var(--chrome-border);
  transition:all .15s;
}
#ttsbtn:hover,#stopbtn:hover,#bmbtn:hover{background:var(--chrome-3);color:#e8e8e8;border-color:#555}
#bmbtn.active{background:#c0392b;color:#fff;border-color:#c0392b}
#bmbtn.active:hover{background:#a93226;border-color:#a93226}
#ttsbtn.on{background:#e8e8e8;color:#111;border-color:#e8e8e8;animation:tpulse 2.5s ease infinite}
#ttsbtn.no-text{opacity:0.38;cursor:not-allowed;pointer-events:none;}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,232,232,0)}50%{box-shadow:0 0 0 5px rgba(232,232,232,.07)}}

/* Voice btn */
#vbtn{
  padding:7px 11px;border-radius:var(--r-sm);font-size:0.76rem;font-weight:500;
  color:#ccc;background:var(--chrome-2);border:1px solid var(--chrome-border);transition:all .13s;
}
#vbtn:hover{color:#e8e8e8;border-color:#555;background:var(--chrome-3)}
#vbtn.open{color:var(--adnu-accent);border-color:var(--adnu-accent);background:var(--blue-glow)}

/* Page indicator */
#pindic{display:none}

/* Footer download progress zone */
#fdl-zone{
  display:none;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
  max-width:320px;
}
#fdl-zone.active{ display:flex; }
#fdl-bar-track{
  flex:1;height:4px;border-radius:2px;
  background:var(--chrome-border);overflow:hidden;min-width:60px;
}
#fdl-bar-fill{
  height:100%;width:0%;border-radius:2px;
  background:var(--blue);
  transition:width .3s ease;
}
#fdl-pct{
  font-size:0.67rem;color:#aaa;white-space:nowrap;min-width:32px;text-align:right;
}
#fdl-msg{
  font-size:0.67rem;color:#888;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:140px;
}

/* ================================================================
   VOICE PANEL
================================================================ */
#vpanel{
  position:absolute;bottom:var(--footer-h);left:0;right:0;
  background:var(--chrome-2);border-top:1px solid var(--chrome-border);
  padding:16px 15px 14px;max-height:410px;overflow-y:auto;
  z-index:200;
  box-shadow:0 -8px 30px rgba(0,0,0,.3);
  /* Hidden: slid fully down below footer, invisible */
  transform:translateY(100%);
  visibility:hidden;
  pointer-events:none;
  transition:
    transform .28s cubic-bezier(.4,0,.2,1),
    visibility 0s linear .28s;
}
#vpanel.open{
  transform:translateY(0);
  visibility:visible;
  pointer-events:auto;
  transition:
    transform .28s cubic-bezier(.4,0,.2,1),
    visibility 0s linear 0s;
}
/* Transparent backdrop — click outside panel to close it */
#vp-backdrop{
  position:absolute;inset:0;bottom:var(--footer-h);
  z-index:199;
  background:transparent;
  display:none;
  cursor:default;
}
#vp-backdrop.open{ display:block; }

.vp-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.vp-hdr h3{font-size:0.88rem;font-weight:600;color:#f0f0f0}
.vp-close{padding:3px 8px;font-size:0.77rem;color:#bbb;border-radius:4px;transition:color .13s;font-weight:500}
.vp-close:hover{color:#fff}

.vp-engs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:13px}
.vp-top-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.vp-top-row .vp-eng{flex:1;min-width:0}
.vp-fs-ctrl{display:flex;flex-direction:column;align-items:center;min-width:86px}
.vp-fs-row{display:flex;align-items:center;gap:5px}
.vp-eng{
  padding:9px 11px;border-radius:var(--r-md);
  background:var(--chrome);border:1px solid var(--chrome-border);
  text-align:left;cursor:pointer;transition:all .13s;
}
.vp-eng:hover{border-color:#555}
.vp-eng.on{border-color:var(--adnu-accent);background:rgba(10,132,255,.07)}
.vp-eng .en{display:block;font-size:0.8rem;font-weight:600;color:#ccc}
.vp-eng .es{display:block;font-size:0.67rem;color:#555;margin-top:1px}

.vp-lbl{font-size:0.67rem;font-weight:600;color:#aaa;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.vp-sel{
  width:100%;background:var(--chrome);border:1px solid var(--chrome-border);
  border-radius:var(--r-sm);padding:8px 28px 8px 11px;color:#ccc;
  font-size:0.81rem;font-family:var(--font-ui);outline:none;
  appearance:none;cursor:pointer;margin-bottom:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.vp-sel:focus{border-color:var(--blue)}

.spd-row{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.spd-row input[type=range]{
  flex:1;-webkit-appearance:none;height:3px;border-radius:99px;
  background:#333;outline:none;cursor:pointer;
}
.spd-row input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:13px;height:13px;border-radius:50%;
  background:#d8d8d8;border:2px solid var(--chrome);cursor:pointer;
}
.spd-val{font-size:0.72rem;color:#555;min-width:32px;text-align:right}

/* Kokoro voices */
.kg{margin-bottom:11px}
.kg-lbl{font-size:0.69rem;color:#444;font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--chrome-border);margin-bottom:6px}
.kg-gr{display:flex;align-items:flex-start;gap:7px;margin-bottom:5px}
.gtag{
  flex-shrink:0;padding:2px 7px;border-radius:3px;font-size:0.64rem;font-weight:600;white-space:nowrap;margin-top:3px;
}
.gtag.f{background:rgba(255,100,160,.1);color:#d46899;border:1px solid rgba(255,100,160,.18)}
.gtag.m{background:rgba(10,132,255,.1);color:#4a9eff;border:1px solid rgba(10,132,255,.18)}
.kchips{display:flex;flex-wrap:wrap;gap:5px}
.kchip{
  padding:4px 11px;border-radius:99px;font-size:0.73rem;font-weight:500;
  background:var(--chrome);border:1px solid var(--chrome-border);
  color:#777;cursor:pointer;transition:all .13s;
}
.kchip:hover{border-color:#666;color:#ccc}
.kchip.on{background:#d8d8d8;border-color:#d8d8d8;color:#111}

/* Kokoro info + download */
.kinfo{
  background:var(--chrome);border:1px solid var(--chrome-border);
  border-radius:var(--r-md);padding:10px 13px;margin:9px 0;
  display:flex;flex-direction:column;gap:4px;
}
.kinfo-row{display:flex;gap:9px;font-size:0.71rem}
.kinfo-row .k{color:#bbb;min-width:95px}
.kinfo-row .v{color:#bbb;font-weight:500}

#klbtn{
  width:100%;padding:9px;border-radius:8px;
  background:#d8d8d8;color:#111;font-size:0.82rem;font-weight:600;
  font-family:var(--font-ui);transition:background .14s;
}
#klbtn:hover:not(:disabled){background:#eee}
#klbtn:disabled{background:#2a2a2a;color:#444;cursor:default}

.dlprog{display:none;margin:7px 0}
.dlbar-row{display:flex;align-items:center;gap:7px}
.dltrack{flex:1;height:3px;background:#2a2a2a;border-radius:99px;overflow:hidden}
.dlfill{height:100%;width:0%;background:#d8d8d8;border-radius:99px}
.dlpct{font-size:0.69rem;font-weight:600;color:#888;min-width:30px;text-align:right}
.dlmsg{font-size:0.65rem;color:#444;margin-top:3px}

.kstat{padding:7px 11px;border-radius:6px;font-size:0.72rem;margin-bottom:7px;display:none}
.kstat.ok{background:rgba(52,199,89,.07);color:#34c759;border:1px solid rgba(52,199,89,.18);display:block}
.kstat.err{background:rgba(255,59,48,.07);color:#ff3b30;border:1px solid rgba(255,59,48,.18);display:block}

/* ── Dark mode overrides ── */
body.dark-mode{--page-bg:#111;--page-text:#e8e8e8;--page-muted:#888;--page-rule:#2e2e2e}
body.dark-mode #smode{background:#0d0d0d}
/* Override epub CSS color rules in dark mode — epub uses explicit colors that win over variables */
body.dark-mode #scontent,
body.dark-mode #stext,
body.dark-mode #stext *:not(a):not(style):not(script){
  color:#e8e8e8 !important;
}
body.dark-mode #scontent{background:#111 !important}
body.dark-mode #rarea{background:#0d0d0d}

/* ── Chapter typography (moved in-house from the epub's own stylesheet —
   linked epub stylesheets are stripped before insertion so they can't
   leak globally; these rules give the same look, with correct light/dark
   contrast, which the epub's own hardcoded dark-ink color could not). ── */
.pinner .chapter-open,#pinner .chapter-open{text-align:center;margin:0 0 2.2em 0}
.pinner .chapter-num-inline,#pinner .chapter-num-inline{
  display:block;font-family:"Cinzel",Georgia,serif;font-size:.42em;
  letter-spacing:.3em;text-transform:uppercase;color:#a9764a;margin-bottom:.5em;
}
.pinner .chapter-title,#pinner .chapter-title{
  font-family:"Cinzel","Trajan Pro",Georgia,serif;font-size:2em;font-weight:400;
  letter-spacing:.03em;margin:0;text-align:center;color:var(--page-text);
}
.pinner .chapter-rule,#pinner .chapter-rule{
  width:90px;border:none;border-top:1px solid #a9764a;margin:1.1em auto 0 auto;
}
.pinner p.first-para::first-letter,#pinner p.first-para::first-letter{
  font-family:"Cinzel",Georgia,serif;font-size:3.4em;float:left;line-height:.8;
  padding:.05em .08em 0 0;color:#a9764a;
}
body.dark-mode #pmode,body.dark-mode .pscene{background:#090909}
body.adnu-demo-shell #pmode,body.adnu-demo-shell .pscene{background:#000}
body.adnu-demo-shell #rarea{background:#000}
body.adnu-demo-shell #smode{background:#000}
body.dark-mode .ppaper{
  background:#111;
  background-image:linear-gradient(to right,rgba(255,255,255,.015) 0%,transparent 4%,transparent 96%,rgba(255,255,255,.01) 100%),
  repeating-linear-gradient(180deg,transparent,transparent 29px,rgba(255,255,255,.012) 29px,rgba(255,255,255,.012) 30px);
  box-shadow:5px 0 16px rgba(0,0,0,.5),-1px 0 4px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.5);
}
body.dark-mode .pinner{color:#e8e8e8}
body.dark-mode .pinner h1{border-color:#2e2e2e}
body.dark-mode .pinner h2{color:#555}
body.dark-mode .pinner p{color:#e8e8e8}
body.dark-mode .pinner .divider{color:#2e2e2e}
body.dark-mode .pnum,body.dark-mode .pchap,body.dark-mode .ptitle{color:#333}
body.dark-mode .btext{color:#e8e8e8}
body.dark-mode .btext h1{border-color:#2e2e2e;color:#e8e8e8}
body.dark-mode .btext h2{color:#777}
body.dark-mode .btext h3{color:#888}
body.dark-mode .btext blockquote{border-color:#2e2e2e;color:#888}
body.dark-mode .btext em{color:#ccc}
body.dark-mode .divider{color:#2e2e2e}
body.dark-mode .illus-cap{color:#555}
body.dark-mode .pcta{background:#1a1a1a;border-color:#2e2e2e}
body.dark-mode .pcta h3{color:#e8e8e8}
body.dark-mode .pcta p{color:#777}
body.dark-mode .cta-lbl{color:#555}
/* word highlight inverted for dark */
body.dark-mode .wtok.hl{background:rgba(232,232,232,.18);color:#fff;box-shadow:0 0 0 2px rgba(232,232,232,.07)}

/* ── Theme toggle button ── */
#theme-btn{
  flex-shrink:0;padding:5px 10px;border-radius:var(--r-sm);
  font-size:0.72rem;font-weight:500;color:#777;border:1px solid var(--chrome-border);
  transition:all .14s;white-space:nowrap;display:flex;align-items:center;gap:4px;
}
#theme-btn:hover{color:#ccc;border-color:#555}
#theme-btn.lit{background:var(--adnu-accent,#e8e8e8);color:#111;border-color:var(--adnu-accent,#e8e8e8)}

/* ================================================================
   WORD HIGHLIGHT
================================================================ */
.wtok{display:inline;border-radius:3px;transition:background .05s,color .05s}
.wtok.hl{background:rgba(28,28,30,.16);color:#111;box-shadow:0 0 0 2px rgba(28,28,30,.07);border-radius:3px}

/* ── Content protection: block selection on all reading surfaces ── */
#stext, #pinner, #smode, #pmode {
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
}
/* Allow word-token interaction for TTS highlight display */
.wtok {
  -webkit-user-select: none;
  user-select: none;
}
/* Block drag of images in epub content */
#stext img, #pinner img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
  /* Force oversized epub images to fit the reading column */
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block;
}
/* ── epub image size safety net ──────────────────────────────
   epub CSS can declare fixed pixel widths on images. This rule
   overrides any such values and forces proportional scaling.   */
#stext img, #stext svg,
#pinner img, #pinner svg {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}
/* Disable print via CSS media (discourages casual printing) */
@media print {
  #shell { display: none !important; }
  body::after {
    content: 'This content is protected. © ADNU Reader / Christopher Bjarn.';
    display: block; text-align: center; padding: 40px;
    font-family: serif; font-size: 1.2rem;
  }
}

/* ── Bookmark ribbon ── */
/* ── Bookmark ribbon ── */
#bm-ribbon {
  position: fixed;
  top: 0;
  left: 28px;
  z-index: 600;
  pointer-events: none;
  transform: translateY(-100%);
  /* drop-shadow follows the clip-path point */
  filter:
    drop-shadow(2px 10px 18px rgba(0,0,0,.55))
    drop-shadow(0   2px  6px rgba(0,0,0,.30));
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    filter    .42s ease;
  visibility: hidden;
}
#bm-ribbon.show {
  transform: translateY(0);
  visibility: visible;
  filter:
    drop-shadow(2px 12px 20px rgba(0,0,0,.60))
    drop-shadow(0   2px  8px rgba(0,0,0,.35));
}

.bm-mark {
  /* Dimensions to match reference */
  width: 150px;
  height: 250px;
  background: #c0392b;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 28px 14px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Top shadow — dark gradient fading into the red body, as in reference */
.bm-mark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(0,0,0,.52) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.bm-title {
  font-family: var(--font-body);
  /* Large enough to match the width of BOOKMARKED below it */
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
  /* No hyphenation */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  color: rgba(255,255,255,.92);
  position: relative;
  z-index: 2;
}
.bm-label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  /* Prevent hyphenation — keep on one line */
  white-space: nowrap;
  word-break: keep-all;
  hyphens: none;
  color: rgba(255,255,255,.96);
  position: relative;
  z-index: 2;
}


/* ══════════════════════════════════════════════════
   ePUB PRELOADER — electrical ring with lightning arcs
═══════════════════════════════════════════════════ */
#epub-loader{
  position:fixed;inset:0;
  background:#0a0a0a;
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  transition:opacity .9s ease, filter .9s ease;
}
#epub-loader.done{
  opacity:0;filter:blur(16px);pointer-events:none;
}

/* Wrap is sized to ring; canvas overflows for arc discharges */
.epl-wrap{position:relative;width:160px;height:160px}

.epl-arc-canvas{
  position:absolute;
  top:-60px;left:-60px;
  width:280px;height:280px;
  pointer-events:none;
  z-index:2;
}

.epl-ring{
  position:relative;z-index:1;
  width:160px;height:160px;
  transform:rotate(-90deg);
  overflow:visible;
}

/* Recessed track */
.epl-track{
  fill:none;stroke:#1a1a1e;stroke-width:10;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.9));
}

/* Base arc — stage class applied by JS */
.epl-fill{
  fill:none;stroke-width:10;stroke-linecap:round;
  stroke-dasharray:502.65;   /* 2π×80 */
  stroke-dashoffset:502.65;
  transition:stroke-dashoffset .35s ease,
             stroke .7s ease,
             filter .7s ease;
}

/* Stage 0: 0–49% — pure electric blue */
.epl-fill.stage-0{
  stroke:#0a84ff;
  filter:
    drop-shadow(0 0  4px rgba(10,132,255,1))
    drop-shadow(0 0 14px rgba(10,132,255,.7))
    drop-shadow(0 0 28px rgba(10,132,255,.3));
  animation:eplBlue 1.4s ease-in-out infinite;
}
/* Stage 1: 50–79% — violet, inner blue blur, wilder */
.epl-fill.stage-1{
  stroke:#8860ff;
  filter:
    drop-shadow(0 0  3px rgba(255,255,255,.9))
    drop-shadow(0 0  8px rgba(100,140,255,1))
    drop-shadow(0 0 20px rgba(120,80,255,.9))
    drop-shadow(0 0 42px rgba(60,40,200,.5));
  animation:eplViolet .85s ease-in-out infinite;
}
/* Stage 2: 80–99% — white-hot core, violet halo, maximum chaos */
.epl-fill.stage-2{
  stroke:#f0ecff;
  filter:
    drop-shadow(0 0  2px rgba(255,255,255,1))
    drop-shadow(0 0  6px rgba(255,255,255,.9))
    drop-shadow(0 0 16px rgba(200,170,255,1))
    drop-shadow(0 0 36px rgba(140,100,255,.8))
    drop-shadow(0 0 60px rgba(80,50,220,.4));
  animation:eplWhite .42s ease-in-out infinite;
}

@keyframes eplBlue{
  0%,100%{opacity:1}
  50%{opacity:.72}
}
@keyframes eplViolet{
  0%,100%{opacity:1;   stroke:#8860ff}
  30%    {opacity:.65; stroke:#4468ff}
  65%    {opacity:.9;  stroke:#aa44ff}
}
@keyframes eplWhite{
  0%,100%{opacity:1;   stroke:#f0ecff}
  25%    {opacity:.55; stroke:#ffffff}
  75%    {opacity:.85; stroke:#c8aaff}
}

/* Percentage text — stage class applied by JS */
.epl-pct{
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui,'Inter',system-ui,sans-serif);
  font-size:1.2rem;font-weight:800;letter-spacing:.04em;
  transition:color .7s ease, text-shadow .7s ease;
}
.epl-pct.stage-0{
  color:#0a84ff;
  text-shadow:0 0 14px rgba(10,132,255,.9);
}
.epl-pct.stage-1{
  color:#b090ff;
  text-shadow:0 0 14px rgba(160,110,255,.9), 0 0 30px rgba(80,80,255,.5);
}
.epl-pct.stage-2{
  color:#ffffff;
  text-shadow:0 0 10px #fff, 0 0 24px rgba(220,200,255,1), 0 0 48px rgba(150,110,255,.8);
}


/* ── View-change confirmation modal ─────────────────────────── */
#view-confirm{
  position:fixed;inset:0;z-index:800;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
}
#view-confirm.open{opacity:1;pointer-events:auto}
.vc-bubble{
  background:var(--chrome-2);
  border:1px solid var(--chrome-border);
  border-radius:22px;
  padding:28px 28px 22px;
  max-width:300px;width:90%;
  text-align:center;
  box-shadow:0 12px 48px rgba(0,0,0,.55);
}
.vc-msg{
  font-size:0.88rem;line-height:1.55;
  color:#ddd;margin-bottom:20px;
}
.vc-btns{
  display:flex;border-radius:999px;overflow:hidden;
  border:1px solid var(--chrome-border);
}
.vc-btns button{
  flex:1;padding:10px 0;font-size:0.82rem;font-weight:600;
  border:none;cursor:pointer;transition:background .13s;
}
#vc-no {background:var(--chrome-3);color:#ddd;}
#vc-no:hover{background:#3a3a3c}
#vc-yes{background:#c0392b;color:#fff;}
#vc-yes:hover{background:#a93226}
.vc-divider{width:1px;background:var(--chrome-border);flex-shrink:0}

/* Ribbon fly-off animation */
@keyframes bmFlyOff{
  0%  {transform:translateY(0);opacity:1}
  100%{transform:translateY(-260px);opacity:0}
}
#bm-ribbon.fly-off{
  animation:bmFlyOff .5s cubic-bezier(.4,0,.6,1) forwards;
}

/* Mobile: hide book title and author from topbar */
@media (max-width: 600px) {
  .tb-info { display: none !important; }
}