/* reader.css — Phase 11a sub-task 17. Page-by-page manga/comic
   reader. Activated by `body[data-reader-mode="1"]` which hides the
   news content well + manga portal so the reader takes over the
   main pane. Dark canvas, light bars top + bottom.

   Modal overlays (chapter list, settings panel, onboarding) live
   in reader-overlays.css. */

/* Reader takeover: hide everything else in .content. */
body[data-reader-mode="1"] .topic-section{display:none !important}
body[data-reader-mode="1"] .region-panel:not(#mangaReader):not(#portalHost){display:none !important}
body[data-reader-mode="1"] #portalHost{display:none !important}
/* Phase 50c — the mobile nav chrome (header + tabs + filters) must not sit
   above the full-screen reader; hide it while reading. */
body[data-reader-mode="1"] .main-header,
body[data-reader-mode="1"] .mobile-chrome{display:none !important}

/* Strip the chrome padding around the reader column. The .main +
   .content paddings (24/32 + 24-bottom respectively) leave visible
   gutters above / below / beside the manga viewer; in reader mode
   we drop them all. The narrow column (`.content max-width:` from
   the page-width setting) stays — it just sits LEFT-aligned in the
   .main pane (flush against the sidebar) instead of being centered
   or offset by the .main left padding. The `.manga-reader`
   border-radius rounds off into the surrounding light bg in news
   mode but reads as wasted edges in reader mode, so square it off.
   `height: 100vh` (not just min-height) pins the .manga-reader to
   exactly viewport height — combined with the column flex layout
   and `flex: 1` on .reader-canvas, this lands the bottom strip
   right at the bottom of the viewport instead of letting the
   reader grow past 100vh and forcing body-level scroll. */
body[data-reader-mode="1"] .main{padding:0}
body[data-reader-mode="1"] .content{padding:0;margin:0}
body[data-reader-mode="1"] .manga-reader{border-radius:0;height:100vh;min-height:100vh}

/* Reader-mode content column width. User-selectable via the
   settings panel (Page width: narrow / medium / wide).
   Default = medium (800px). News mode keeps the wider 900px
   column (where article cards benefit from the horizontal space).
   Only the page well's inner padding stays trimmed — the
   surrounding layout (sidebar, .main padding, border-radius) is
   unchanged. */
body[data-reader-mode="1"] .content{max-width:800px}
body[data-reader-mode="1"][data-reader-width="narrow"] .content{max-width:575px}
body[data-reader-mode="1"][data-reader-width="medium"] .content{max-width:800px}
body[data-reader-mode="1"][data-reader-width="wide"]   .content{max-width:900px}

.manga-reader{display:none}
body[data-reader-mode="1"] .manga-reader{display:flex;flex-direction:column;background:#1c1f29;color:#e6e9f0;border-radius:10px;overflow:hidden;min-height:calc(100vh - 96px);position:relative}

/* Top bar — back button, series title + group chip, settings gear,
   ☰ chapter list, 📥 save offline button. */
.manga-reader .reader-topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#11141c;border-bottom:1px solid #2a3040;flex-wrap:wrap}
/* Series title is visually centered in the top-bar. The title-bar is
   a flex item with flex:1 (absorbs the space between the ← Back
   button and the right-cluster of action buttons), and inside it
   `justify-content:center` centers the title text horizontally. The
   result is "center-balanced" between left + right button clusters
   rather than absolute-geometric center, which matches the typical
   manga-reader / iOS-app top-bar pattern and degrades cleanly when
   the title is long enough to need ellipsis truncation. */
.manga-reader .reader-title-bar{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:10px}
/* Series title in the reader top-bar uses Inter explicitly. The
   reader sits inside `.content`, which sets the body font to
   `Slabo 13px` (the serif used for news article headlines). The
   reader is UI chrome, not article content, so the title should
   follow the standard sans-serif typography the rest of the
   reader's buttons and chrome use.
   -webkit-font-smoothing + -moz-osx-font-smoothing disable subpixel
   antialiasing for this element. On the dark reader background,
   subpixel rendering creates a faint colored fringe around glyphs
   that reads like a drop shadow; grayscale antialiasing removes it.
   font-weight dropped from 600 to 500 to match the surrounding
   button chrome (which is also weight 500) so the title doesn't
   visually shout. */
.manga-reader .reader-title{
  font-family:'Inter',sans-serif;
  font-weight:500;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Short button labels (PREV/NEXT) are mobile-only; desktop uses the full word. */
.manga-reader .rbtn-label-short{display:none}

/* Chapter-unavailable state (page list failed to load) — a grey poster with
   📖 + "404" (mirrors the chapter-list placeholder) and a short note. No
   buttons: navigation is the top Back + bottom PREV/NEXT. */
.manga-reader .reader-unavailable{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  direction:ltr;   /* RTL series set the canvas to rtl, which threw the trailing
                      period to the front (".This chapter…"); force LTR here. */
}
.manga-reader .reader-unavailable-poster{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.manga-reader .reader-unavailable-poster .cpf-glyph{ font-size:40px; filter:grayscale(1); opacity:.45; }
.manga-reader .reader-unavailable-poster .cpf-code{ font-size:14px; font-weight:700; letter-spacing:.08em; color:#6b7280; }
.manga-reader .reader-unavailable-text{ font-size:14px; color:#a8b1c5; }
.manga-reader .reader-group-badge{display:inline-block;padding:2px 8px;background:#2a3040;color:#a8b1c5;font-size:11px;border-radius:4px;font-weight:500;flex-shrink:0}
.manga-reader .reader-btn{background:#2a3040;color:#e6e9f0;border:none;border-radius:6px;padding:6px 14px;cursor:pointer;font-size:13px;font-family:'Inter',sans-serif;font-weight:500;transition:background .15s}
.manga-reader .reader-btn:hover{background:#3a4258}

/* Phase 11e — "Save offline" button. */
/* Phase 11g iteration — same visual scheme as the per-row chapter
   pin button: transparent background with a border by default,
   solid green when saved. Both states show the same "offline
   reading" label; the background communicates the state. */
.manga-reader .reader-offline-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  padding:5px 10px;
  background:#2a3040;
  border:1px solid #5a6172;
  color:#a8b1c5;
}
.manga-reader .reader-offline-btn:hover{background:#2a3040;border-color:#7a8aa8;color:#e6e9f0}
/* Topbar icon buttons (settings + offline) — unify border/height with each
   other and the text buttons, and enlarge the glyph so the SVG icon is crisp
   rather than tiny. Both: no border, same grey bg, centered 18px icon. The
   green .is-saved state still wins below. */
.manga-reader .reader-settings-btn,
.manga-reader .reader-offline-btn,
.manga-reader .reader-archive-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; background:#2a3040; color:#cfd5e2; padding:6px 11px;
}
.manga-reader .reader-settings-btn .ph,
.manga-reader .reader-offline-btn .ph,
.manga-reader .reader-archive-btn .ph{ font-size:18px; }
/* Phase 123 — match the Offline button: 13px label + 4px icon/label gap. */
.manga-reader .reader-archive-btn{ font-size:13px; gap:4px; }
.manga-reader .reader-offline-btn.is-saved{background:#1f6b3d;border-color:#2a8350;color:#d2f5dd}
.manga-reader .reader-offline-btn.is-saved:hover{background:#2a8350;border-color:#3aa166;color:#fff}
.manga-reader .reader-offline-btn:disabled{opacity:.7;cursor:wait}
/* Phase 11c-i follow-up — visible "downloading" state during prewarm.
   The button's label changes to "📥 Downloading N pages…" while the
   pulse animation telegraphs that something's actively happening
   (otherwise the 10-30s wait reads like a frozen UI). Reuses the
   keyframe defined in reader-overlays.css. */
.manga-reader .reader-offline-btn.is-saving{
  cursor:wait;
  animation:reader-pin-pulse 1s ease-in-out infinite;
  border-color:#7a8aa8;
}
@media (prefers-reduced-motion: reduce){
  .manga-reader .reader-offline-btn.is-saving{animation:none;opacity:.75}
}

/* Page canvas — 4 sizing modes via data-page-size. */
/* Canvas no longer pads the page — the user wanted the well
   maximized edge-to-edge. The page itself still constrains via
   `data-page-size` (fit-height / fit-width / etc.) so it doesn't
   actually touch the bar edges in most modes. */
/* Phase 43 follow-up - `safe center` falls back to `start` when the
   flex item overflows, so a zoomed image stays reachable from the
   top-left via scroll instead of getting clipped above/left of the
   scroll origin. */
.manga-reader .reader-canvas{flex:1;display:flex;align-items:safe center;justify-content:safe center;background:#0a0c12;padding:0;min-height:60vh;overflow:auto}

/* ───────── Phase 50a — mobile reader ─────────
   Center-tap (reader-touch.js) toggles the top bar. Works at any width but is
   only reachable via touch. */
body.reader-chrome-hidden .manga-reader .reader-topbar{display:none}

/* Phase 50c — privacy blackout. A click/tap on the page (reader-touch.js)
   blacks out the PAGE so onlookers can't see the art; click/tap again to
   restore. The top + bottom navigation bars stay visible so the user can keep
   navigating while blacked out. The canvas stays visible + clickable (only the
   page image is hidden), so a click anywhere on it dismisses the blackout. */
body.reader-blackout .manga-reader .reader-canvas{ background:#000 !important; position:relative; }
body.reader-blackout .manga-reader .reader-page{ visibility:hidden; }
/* Cool wavy "aurora" — colour blobs drift over the black so the privacy
   screen has gentle motion without revealing anything. pointer-events off so a
   click still dismisses it. Pinned to the VIEWPORT (position:fixed) rather than
   the canvas: the canvas is a scroll container, so an absolute curtain scrolled
   off the top on long pages and left the bottom uncovered. Fixed keeps it
   blanketing the full screen at any scroll position. */
body.reader-blackout .manga-reader .reader-canvas::after{
  content:""; position:fixed; inset:0; z-index:26; pointer-events:none;
  background:
    radial-gradient(52% 38% at 20% 24%, rgba(70,120,245,.50), transparent 70%),
    radial-gradient(50% 42% at 82% 70%, rgba(170,80,225,.46), transparent 70%),
    radial-gradient(46% 38% at 60% 46%, rgba(40,195,205,.42), transparent 72%),
    radial-gradient(44% 36% at 32% 80%, rgba(235,90,155,.42), transparent 72%),
    radial-gradient(42% 34% at 78% 16%, rgba(245,175,70,.36), transparent 72%),
    radial-gradient(40% 34% at 50% 100%, rgba(80,220,140,.34), transparent 72%);
  background-size:180% 180%, 190% 190%, 170% 170%, 200% 200%, 175% 175%, 185% 185%;
  animation:reader-blackout-wave 14s ease-in-out infinite alternate;
}
@keyframes reader-blackout-wave{
  0%   { background-position:   0% 0%, 100% 100%,  50% 0%,   0% 100%, 100% 0%,  50% 100%; }
  50%  { background-position: 100% 60%,  10% 40%, 100% 100%, 100% 10%,  0% 90%,   0% 30%; }
  100% { background-position:  40% 100%, 60% 0%,   0% 50%,   50% 0%,   50% 100%, 100% 60%; }
}
@media (prefers-reduced-motion: reduce){
  body.reader-blackout .manga-reader .reader-canvas::after{ animation:none; }
}

@media (max-width: 800px) {
  /* Fill the screen — the desktop ~800px reading column would letterbox the
     reader on a phone. Override the base + all width variants. */
  body[data-reader-mode="1"] .content,
  body[data-reader-mode="1"][data-reader-width="narrow"] .content,
  body[data-reader-mode="1"][data-reader-width="medium"] .content,
  body[data-reader-mode="1"][data-reader-width="wide"]   .content{max-width:100%}
  body[data-reader-mode="1"] .manga-reader{height:100dvh;min-height:100dvh;border-radius:0}
  /* Pinch-zoom is handled in JS (reader-zoom.js) and applied to the page IMAGE
     only, NOT the whole viewport — so the top/bottom bars never scale. We
     therefore drop the `pinch-zoom` token so the browser doesn't also zoom the
     visual viewport; pan-x + pan-y keep one-finger dragging panning the
     overflow:auto canvas in any direction. */
  .manga-reader .reader-canvas{touch-action:pan-x pan-y}
  /* Immersive: the reader has its own ← Back, so hide the page ☰ toggle. */
  body[data-reader-mode="1"] .sidebar-toggle{display:none}
  /* Phase 50c — mobile bottombar: square Previous/Next buttons, no keyboard
     hints (no keyboard on touch) and no arrow glyphs — just the labels. */
  /* Drop all arrow glyphs (Back, Previous, Next) + keyboard hints on touch. */
  .manga-reader .rbtn-arrow,
  .manga-reader .rbtn-key{ display:none; }
  /* Offline button: icon-only on mobile (drop the "offline reading" label). */
  .manga-reader .reader-offline-btn .reader-offline-label{ display:none; }
  /* Phase 123 — archive button: icon-only on mobile, same as offline. */
  .manga-reader .reader-archive-btn .reader-archive-label{ display:none; }
  /* PREV / NEXT: short uppercase labels (swap full word → short) on mobile. */
  .manga-reader .rbtn-label{ display:none; }
  .manga-reader .rbtn-label-short{ display:inline; }
  /* Square Prev/Next buttons. */
  .manga-reader .reader-prev,
  .manga-reader .reader-next{
    flex:0 0 auto; border-radius:6px; padding:13px 20px;
    font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  }
  /* Float the top + bottom bars over the page with a frosted blur (the page
     fills the screen behind them); drop the hard dividers. */
  .manga-reader .reader-topbar,
  .manga-reader .reader-bottombar{
    position:absolute; left:0; right:0; z-index:5;
    background:rgba(17,20,28,0.55); border:none;
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  }
  .manga-reader .reader-topbar{ top:0; }
  .manga-reader .reader-bottombar{ bottom:0; }
  /* The bars float OVER the page, so the scroll area needs clearance equal to
     their heights — otherwise the first/last slice of a long page hides behind
     the frosted bars. Padding on the scroll container adds real scrollable
     space at both ends (and keeps short, centered pages off the bars too). */
  .manga-reader .reader-canvas{
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
  /* Tap-to-hide chrome removes the top bar — reclaim its reserved space. */
  body.reader-chrome-hidden .manga-reader .reader-canvas{ padding-top:0; }
  /* Phase 130 — "Side edges" nav (mobile only): Prev/Next pinned to the left /
     right edges at mid-height, semi-transparent so the page reads through. The
     bottom bar then just centers the page counter. The overlay is a direct child
     of .manga-reader (position:relative, full-height on mobile), so the buttons
     position relative to the whole reader rather than the bottom bar. */
  body[data-reader-navpos="sides"] .manga-reader .reader-sidenav{ display:block; }
  body[data-reader-navpos="sides"] .manga-reader .reader-bottombar .reader-prev,
  body[data-reader-navpos="sides"] .manga-reader .reader-bottombar .reader-next{ display:none; }
  body[data-reader-navpos="sides"] .manga-reader .reader-bottombar{ justify-content:center; }
  .manga-reader .reader-sidenav .reader-btn{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:6; opacity:.42; padding:22px 14px; border-radius:0; transition:opacity .15s;
  }
  .manga-reader .reader-sidenav .reader-side-prev{ left:0; border-radius:0 12px 12px 0; }
  .manga-reader .reader-sidenav .reader-side-next{ right:0; border-radius:12px 0 0 12px; }
  .manga-reader .reader-sidenav .reader-btn:active{ opacity:.9; }
  .manga-reader .reader-sidenav .reader-btn .ph{ font-size:22px; display:block; }
  /* Series title drops to its own (centered) line below the action-button row
     (the long "All mangas"/"All chapters" labels crowd a single row). */
  .manga-reader .reader-title-bar{ flex:0 0 100%; order:2; justify-content:center; }
  /* Right-align the offline + All-chapters buttons; Back + ⚙ stay left. The
     auto margin after Settings pushes everything following it to the right. */
  .manga-reader .reader-settings-btn{ margin-right:auto; }
  /* Phase 50c — manga pages fill the device WIDTH and scroll vertically when
     taller than the screen. The fit-height modes constrain by max-height,
     which renders long vertical strips hair-thin and forced pinch-zoom to
     read. Force fit-width on mobile (!important beats the [data-page-size]
     rules). Pinch-zoom still works on top of this for finer control. */
  .manga-reader .reader-canvas .reader-page{
    width:100% !important; height:auto !important;
    max-width:100% !important; max-height:none !important;
  }
}
/* Phase 11g iteration — White background mode. Activated via the
   reader settings panel (Background → White). Full light-theme
   override: canvas, top/bottom strips, container, text colors, and
   button chrome all swap so the entire reader feels coherent in
   light mode. The page's drop shadow softens to fit the lighter
   surface. The chapter-list overlay + settings panel keep their
   own theming since they're separate widgets. */
body[data-reader-bg="white"] .manga-reader{background:#f5f5f5;color:#1a1a1a}
body[data-reader-bg="white"] .manga-reader .reader-canvas{background:#fafafa}
body[data-reader-bg="white"] .manga-reader .reader-page{box-shadow:0 2px 8px rgba(0,0,0,.12)}
body[data-reader-bg="white"] .manga-reader .reader-topbar,
body[data-reader-bg="white"] .manga-reader .reader-bottombar{background:#ececec;border-color:#d9d9d9}
body[data-reader-bg="white"] .manga-reader .reader-topbar{border-bottom-color:#d9d9d9}
body[data-reader-bg="white"] .manga-reader .reader-bottombar{border-top-color:#d9d9d9}
body[data-reader-bg="white"] .manga-reader .reader-title{color:#1a1a1a}
body[data-reader-bg="white"] .manga-reader .reader-progress{color:#5a5a5a}
body[data-reader-bg="white"] .manga-reader .reader-chapter-subtitle{color:#1a1a1a}
body[data-reader-bg="white"] .manga-reader .reader-msg{color:#5a5a5a}
body[data-reader-bg="white"] .manga-reader .reader-btn{background:#e0e0e0;color:#1a1a1a}
body[data-reader-bg="white"] .manga-reader .reader-btn:hover{background:#d0d0d0}
/* Offline-reading button: keep its transparent / green-when-saved
   scheme but adapt the inactive border + text to the light surface. */
body[data-reader-bg="white"] .manga-reader .reader-offline-btn{background:transparent;border-color:#a0a0a0;color:#5a5a5a}
body[data-reader-bg="white"] .manga-reader .reader-offline-btn:hover{background:#e0e0e0;border-color:#7a7a7a;color:#1a1a1a}
/* `.is-saved` keeps its green identity in both themes. */
/* Page sizing — uses `max-*` constraints with `width:auto;
   height:auto` everywhere so the image scales proportionally on
   any browser resize (vertical OR horizontal). The earlier
   fit-height rule used `height: calc(...)` which forced a fixed
   height regardless of canvas width, breaking aspect ratio when
   the window narrowed (the browser clamped width via
   max-width:100% but kept the forced height, distorting the
   image). With max-height + max-width, the browser uses the
   image's intrinsic aspect ratio to scale both dimensions
   together.
   `max-height:100%` is relative to the canvas's actual height
   (flex:1 inside the 100vh column), which is the cleanest way to
   eliminate the small top/bottom gap. The earlier
   `calc(100vh - X)` overestimated the chrome by ~20px and the
   canvas's `align-items:center` centered the smaller page,
   leaving a 10px gap above and below. With `max-height:100%`
   the page fills exactly the canvas's height. */
.manga-reader .reader-page{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  box-shadow:0 6px 24px rgba(0,0,0,.45);
}
/* fit-height + fit-screen both fall through to the default
   max-width/max-height behaviour above (proportional fit within
   the canvas). They're separate radio options for back-compat
   with the existing settings UI; behaviour is now identical. */
.manga-reader .reader-canvas[data-page-size="fit-height"] .reader-page,
.manga-reader .reader-canvas[data-page-size="fit-screen"] .reader-page{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
}
/* fit-width forces the page to span the canvas's full width;
   height auto-derives via aspect ratio. No max-height so a tall
   page can scroll inside the canvas (which has overflow:auto). */
.manga-reader .reader-canvas[data-page-size="fit-width"]  .reader-page{
  width:100%;
  height:auto;
  max-width:100%;
  max-height:none;
}
/* natural — no constraints, image at its intrinsic size. */
.manga-reader .reader-canvas[data-page-size="natural"] .reader-page{
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
}

/* Bottom bar — Previous, progress text, Next. */
.manga-reader .reader-bottombar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;background:#11141c;border-top:1px solid #2a3040;flex-wrap:wrap}
/* Phase 130 — side-edge nav overlay; hidden unless mobile + "Side edges" pref. */
.manga-reader .reader-sidenav{display:none}
.manga-reader .reader-progress{flex:1;text-align:center;font-size:13px;color:#a8b1c5;cursor:pointer;user-select:none}
.manga-reader .reader-progress:hover{color:#cdd2de}
.manga-reader .reader-chapter-subtitle{color:#e6e9f0;font-style:italic}

/* RTL: flip the visual reading direction. The keyboard mapping
   (j=advance) stays the same; only the visual layout mirrors so the
   Previous/Next buttons land where a Japanese reader expects. */
.manga-reader[data-direction="rtl"] .reader-canvas{direction:rtl}
.manga-reader[data-direction="rtl"] .reader-bottombar .reader-prev{order:3}
.manga-reader[data-direction="rtl"] .reader-bottombar .reader-progress{order:2}
.manga-reader[data-direction="rtl"] .reader-bottombar .reader-next{order:1}

/* Phase 43 -- zoom controls. The CSS `zoom` property scales both
   the visual rendering AND the layout box, so the canvas's
   overflow:auto correctly reflects the scaled dimensions and
   arrow-key scrolling reaches every edge of the zoomed image. The
   earlier `transform: scale()` approach kept the layout box
   unchanged and the left/right edges fell outside the scrollable
   region. The actual `zoom` value is set inline on the <img> by
   reader.js _applyZoom (NOT via a CSS custom property + var(),
   which doesn't resolve on `zoom` consistently across browsers). */
.manga-reader .reader-page{
  /* `zoom` value lives in inline style, set by JS. */
}

/* Phase 43 -- zoom badge. Transient pill ("1.5x", "0.7x", "2x")
   that fades in for ~1.2s when zoom changes (timer reset on
   each step so rapid +/+/+ shows the latest value). Hidden at
   1x (no badge needed when at default). */
.manga-reader .reader-zoom-badge{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  background: rgba(15, 17, 23, .85);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 14px 28px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.manga-reader .reader-zoom-badge.show{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* The reader host needs position: relative so the absolutely-
   positioned badge anchors to the reader's bounding box (not the
   viewport). The host already has position via existing styles in
   most cases; safe to assert here. */
.manga-reader{position: relative}

/* Loading / unavailable / error states inside the canvas. */
.manga-reader .reader-msg{padding:48px;color:#a8b1c5;font-size:14px;text-align:center}
.manga-reader .reader-error{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 24px;max-width:520px;margin:0 auto;color:#e6e9f0}
.manga-reader .reader-error-title{font-size:18px;font-weight:600;color:#f0d4a8}
.manga-reader .reader-error-detail{font-size:13px;color:#a8b1c5;line-height:1.5;text-align:center}
.manga-reader .reader-error-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.manga-reader .reader-error-actions .reader-btn{background:#2945d6;color:#fff;padding:8px 16px;font-size:13px}
.manga-reader .reader-error-actions .reader-btn:hover{background:#1f3aba}

/* Chapter splash — brief overlay shown when advancing chapters. */
.manga-reader .reader-splash{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.85);color:#fff;padding:24px 48px;border-radius:12px;font-size:24px;font-weight:600;pointer-events:none;animation:reader-splash-fade .6s ease forwards}
@keyframes reader-splash-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}

/* Caught-up screen at the end of the chapter list. */
.manga-reader .reader-caughtup{padding:96px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.manga-reader .reader-caughtup-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.manga-reader .reader-caughtup .reader-caughtup-reread{background:#2945d6;color:#fff;padding:8px 18px}
.manga-reader .reader-caughtup .reader-caughtup-reread:hover{background:#1f3aba}
.manga-reader .reader-caughtup-msg{font-size:24px;font-weight:600;margin-bottom:20px;color:#e6e9f0}

@media (prefers-reduced-motion: reduce){
  .manga-reader .reader-splash{animation:none}
}