/* ==========================================================================
   reader.css — Reader screen: stage, page-turn transition layers, tap zones,
   top/bottom bars, settings drawer, thumbnails, bookmark flag.
   ========================================================================== */
.reader{
  position:fixed; inset:0; background:#000; z-index:200; display:flex; flex-direction:column;
  animation: readerIn var(--dur-slow) var(--ease-out) both;
}
.reader.closing{ animation: readerOut var(--dur-base) var(--ease-in-out) forwards; }

.reader-stage{ flex:1; position:relative; overflow:hidden; background:#000; touch-action:none; }

/* one absolutely-positioned layer per page transition; the outgoing layer
   is animated out and removed from the DOM once its animation ends */
.page-layer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  will-change:transform, opacity;
}
.page-layer.enter-right{ animation: pageEnterFromRight var(--dur-page) var(--ease-out) both; }
.page-layer.enter-left{ animation: pageEnterFromLeft var(--dur-page) var(--ease-out) both; }
.page-layer.exit-left{ animation: pageExitToLeft var(--dur-page) var(--ease-in-out) forwards; }
.page-layer.exit-right{ animation: pageExitToRight var(--dur-page) var(--ease-in-out) forwards; }

.page-img{ max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; display:block; }
.page-pair{ display:flex; height:100%; width:100%; align-items:center; justify-content:center; gap:1px; }
.page-pair img, .page-pair canvas{ height:100%; max-width:50%; object-fit:contain; }
.page-pair.rtl{ flex-direction:row-reverse; }

/* zoom/rotation live here, decoupled from the .page-layer slide animation
   above (which owns `transform` for the enter/exit keyframes) — this wrapper
   is what the Zoom and Rotation controls actually update. Fit mode also
   applies here: "screen" (default) keeps the page fully visible via
   object-fit:contain on .page-img; "width"/"height" let one axis overflow
   and become scrollable instead of shrinking to fit. */
.page-zoom-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform-origin:center center; }
.page-zoom-wrap.fit-w{ align-items:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.page-zoom-wrap.fit-w .page-img{ width:100%; height:auto; max-width:none; max-height:none; }
.page-zoom-wrap.fit-h{ justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x; }
.page-zoom-wrap.fit-h .page-img{ height:100%; width:auto; max-width:none; max-height:none; }

.tap-zones{ position:absolute; inset:0; display:flex; z-index:5; }
.tap-zones .z{ flex:1; height:100%; }
.tap-zones .z.center{ flex:1.4; }

.reader-loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--paper-dim); background:#000; }
.reader-loading .glyph{ font-family:var(--font-display); font-size:34px; color:var(--accent); animation:glyphBreathe 1.4s var(--ease-in-out) infinite; }
.spinner{ width:30px; height:30px; border-radius:50%; border:3px solid var(--ink-3); border-top-color:var(--accent); animation:spin .8s linear infinite; }

.reader-error{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px; text-align:center; background:#000; animation:scaleFadeIn var(--dur-base) var(--ease-out) both; }
.reader-error .glyph{ font-size:30px; color:var(--accent); }
.reader-error h3{ margin:0; font-size:16px; }
.reader-error p{ margin:0; font-size:13px; color:var(--paper-faint); max-width:320px; line-height:1.5; }
.reader-error .back-btn{ margin-top:6px; width:auto; padding:10px 20px; border-radius:100px; background:var(--ink-3); border:none; color:var(--paper); font-size:13px; transition:transform var(--dur-fast) var(--ease-spring); }
.reader-error .back-btn:active{ transform:scale(.94); }

.bar{ position:absolute; left:0; right:0; z-index:10; display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(to bottom, rgba(0,0,0,.85), transparent); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.bar.top{ top:0; padding-top:calc(12px + var(--safe-top)); padding-left:calc(14px + var(--safe-left)); padding-right:calc(14px + var(--safe-right)); }
.bar.bottom{ bottom:0; background:linear-gradient(to top, rgba(0,0,0,.9), transparent); flex-direction:column; align-items:stretch; padding-bottom:calc(14px + var(--safe-bottom)); padding-left:calc(14px + var(--safe-left)); padding-right:calc(14px + var(--safe-right)); }
.bar.hidden.top{ transform:translateY(-100%); opacity:0; pointer-events:none; }
.bar.hidden.bottom{ transform:translateY(100%); opacity:0; pointer-events:none; }
.bar-title{ flex:1; min-width:0; }
.bar-title .t{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-title .s{ font-size:11px; color:var(--paper-faint); font-variant-numeric:tabular-nums; }
.reader-ibtn{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:none; color:var(--paper); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.reader-ibtn:active{ transform:scale(.88); background:rgba(255,255,255,.18); }
.reader-ibtn.on{ background:var(--accent); color:var(--accent-ink); }

.slider-row{ display:flex; align-items:center; gap:10px; padding:2px 4px; }
.slider-row .n{ font-size:11px; color:var(--paper-faint); width:34px; text-align:center; font-variant-numeric:tabular-nums; }
input[type=range]{ -webkit-appearance:none; flex:1; height:4px; background:var(--ink-4); border-radius:4px; outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--accent-ink); margin-top:-6px; transition:transform var(--dur-fast) var(--ease-spring); }
input[type=range]::-webkit-slider-thumb:active{ transform:scale(1.25); }

.thumbs-strip{ display:flex; gap:8px; overflow-x:auto; padding:8px 2px 0 2px; }
.thumbs-strip .th{ flex-shrink:0; width:46px; height:64px; border-radius:6px; overflow:hidden; border:2px solid transparent; background:var(--ink-3); opacity:.6; transition:opacity var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring); animation:rowIn var(--dur-fast) var(--ease-out) both; }
.thumbs-strip .th:active{ transform:scale(.92); }
.thumbs-strip .th.active{ border-color:var(--accent); opacity:1; }
.thumbs-strip img{ width:100%; height:100%; object-fit:cover; display:block; }

.settings-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw); background:var(--ink-1);
  border-left:1px solid var(--ink-3); z-index:30; padding:calc(18px + var(--safe-top)) 18px 18px 18px;
  overflow-y:auto; animation: drawerIn var(--dur-base) var(--ease-spring) both;
}
.settings-panel.leaving{ animation: drawerOut var(--dur-fast) var(--ease-in-out) forwards; }
.drawer-backdrop{ position:absolute; inset:0; z-index:29; background:rgba(0,0,0,.35); animation:backdropIn var(--dur-base) both; }
.drawer-backdrop.leaving{ animation:backdropOut var(--dur-fast) both; }
.settings-panel h4{ font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--paper-faint); margin:18px 0 10px 0; }
.settings-panel h4:first-of-type{ margin-top:0; }
.seg{ display:flex; background:var(--ink-2); border-radius:10px; padding:3px; gap:3px; }
.seg button{ flex:1; background:transparent; border:none; color:var(--paper-dim); font-size:12.5px; font-weight:600; padding:9px 4px; border-radius:8px; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast); }
.seg button.on{ background:var(--accent); color:var(--accent-ink); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 2px; }
.toggle-row span{ font-size:13.5px; }
.switch{ width:42px; height:24px; border-radius:100px; background:var(--ink-4); position:relative; border:none; flex-shrink:0; transition:background var(--dur-fast); }
.switch.on{ background:var(--accent); }
.switch i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--paper); transition:transform var(--dur-fast) var(--ease-spring); }
.switch.on i{ transform:translateX(18px); background:var(--accent-ink); }
.zoom-row{ display:flex; align-items:center; gap:10px; }
.close-settings{ position:absolute; top:calc(14px + var(--safe-top)); right:14px; }

.bookmark-flag{
  position:absolute; top:calc(10px + var(--safe-top)); right:14px; z-index:8;
  background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:800;
  padding:5px 9px 6px 9px; border-radius:0 0 6px 6px; box-shadow:0 4px 10px rgba(0,0,0,.4);
  animation: bookmarkDrop var(--dur-base) var(--ease-spring) both;
}

.hint-flash{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:9; }
.hint-flash .bubble{ background:rgba(0,0,0,.6); backdrop-filter:blur(4px); padding:10px 18px; border-radius:100px; font-size:13px; opacity:0; animation:hintPop .6s var(--ease-out); }

.tap-ping{ position:absolute; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:rgba(255,255,255,.16); pointer-events:none; z-index:6; animation:ping .5s var(--ease-out) forwards; }

@media (min-width: 860px){
  .tap-zones .z{ flex:1; }
}