/*
 * lanobots-comic-reader.css
 *
 * Comic Reader page additions — layered on top of the shared LanoBots design system.
 * Palette:  #050505 bg | #f4f2ec off-white | #ffd400 yellow | #7b4fd4 purple
 * Fonts:    Bowlby One SC (display) / Barlow Condensed (UI) / Barlow (body)
 *
 * Sections:
 *   1. Base / page setup
 *   2. Reader Hero (§A)
 *   3. Sticky Toolbar (§B)
 *   4. Vertical Reader + Pages (§C)
 *   5. Page placeholders / lazy load
 *   6. Part-end transition (§E)
 *   7. Issue-end section
 *   8. Contents drawer
 *   9. Focus Mode
 *  10. Responsive — tablet / mobile
 */

/* ============================================================
   1. BASE / PAGE SETUP
   ============================================================ */

/*
 * Fix: .lb-homepage has overflow-x: hidden which clips position:fixed children.
 * Move the overflow constraint to html, keep body visible so the fixed header
 * and toolbar render at viewport level.
 */
html {
  overflow-x: hidden;
  margin: 0;
}
body.lb-reader-page {
  overflow-x: visible;
  margin: 0;
  padding: 0;
  /* Extra top padding = sticky header height + sticky toolbar height */
  padding-top: calc( var(--lb-header-h, 68px) + var(--lb-toolbar-h, 56px) );
}

/* ── Immersive reader state (Phase 4) ────────────────────────────────────────
 * The global site header/footer are shared components (lanobots-nav-partial.php
 * / lanobots-footer-partial.php) used by every standalone page — they are never
 * edited here. Instead, this reader-scoped body class hides the header only on
 * this template while actively reading and zeroes --lb-header-h, the token every
 * height/offset calc() in this file already keys off of, so the comic reclaims
 * that space and fills the viewport with only the reader's own toolbar above it.
 */
body.lb-reader-active {
  --lb-header-h: 0px;
}
body.lb-reader-active .lb-header {
  display: none;
}

/* Allow nav hover dropdowns/animations to overflow correctly */
.lb-header,
.lb-header__inner,
.lb-header__nav,
.lb-header__nav ul,
.lb-header__nav li { overflow: visible; }

/* Reader accent color — purple throughout */
.lb-reader-page { --page-accent: #7b4fd4; }


/* ============================================================
   2. READER HERO (§A)
   Compact cinematic hero — establishes series/issue/part context
   ============================================================ */

.lb-reader-hero {
  position: relative;
  background: #05050a;
  padding: 4rem 2rem 5rem;
  overflow: visible;
  border-bottom: 1px solid rgba(123, 79, 212, 0.25);
}

/* Background image with strong dark overlay */
.lb-reader-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden; /* contain the blurred/scaled bg image — not the foreground */
}
.lb-reader-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.38;
  filter: blur(2px) saturate(0.8);
  transform: scale(1.04); /* compensate blur edge bleed */
}
.lb-reader-hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 5, 10, 0.55) 0%,
    rgba(5, 5, 10, 0.82) 60%,
    rgba(5, 5, 10, 0.98) 100%
  );
}

.lb-reader-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: block;
}

/* Cover thumbnail */
.lb-reader-hero__cover-frame {
  position: relative;
  aspect-ratio: 2 / 3;          /* standard comic page ratio (e.g. 900×1350) */
  min-height: 280px;             /* safety net if aspect-ratio calculation fails */
  border: 2px solid rgba(123, 79, 212, 0.8);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(123,79,212,0.35),
    0 0 20px rgba(123,79,212,0.55),
    0 0 60px rgba(123,79,212,0.25),
    0 20px 60px rgba(0,0,0,0.8);
  background: #0d0d14;           /* dark bg visible if image has transparency */
}
/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 2 / 3) {
  .lb-reader-hero__cover-frame { padding-top: 150%; }
}
.lb-reader-hero__cover-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0d0d14 0%, #1a1020 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  border: 1px solid rgba(123,79,212,0.2);
}
.lb-reader-hero__cover-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.45);
}
/* Real cover image */
.lb-reader-hero__cover-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;      /* override .lb-homepage img { height: auto } */
  object-fit: cover;            /* fill the frame edge-to-edge, like the CPT single page */
  object-position: center top;  /* keep the title/logo visible at the top */
  display: block;
}

/* Hero text */
.lb-reader-hero__series {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7b4fd4;
  margin-bottom: 0.3rem;
}
.lb-reader-hero__title {
  font-family: 'Bowlby One SC', 'Barlow Condensed', sans-serif;
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #f4f2ec;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
}
.lb-reader-hero__part {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ffd400;
  margin-bottom: 0.75rem;
}
.lb-reader-hero__desc {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  color: rgba(244, 242, 236, 0.7);
  line-height: 1.6;
  max-width: 540px;
  margin-bottom: 0.5rem;
}
.lb-reader-hero__pages-range {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: rgba(244, 242, 236, 0.38);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}
.lb-reader-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
/* Uniform height for all hero CTA buttons */
.lb-reader-hero__ctas .lb-btn {
  min-height: 46px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.9rem;
}
.lb-reader-hero__ctas .lb-btn--sm {
  min-height: 46px;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  font-size: 0.9rem;
}


/* ============================================================
   3. STICKY READER TOOLBAR (§B)
   Pinned below the site header while reading.
   Height is exposed as --lb-toolbar-h for body padding.
   ============================================================ */

:root { --lb-toolbar-h: 52px; }

.lb-reader-toolbar {
  /* !important: lanobots-background.css lifts every direct body child to
     position:relative;z-index:1 (to sit above the fixed background canvas)
     with a selector that outranks a plain class rule — this element needs
     to escape that and stay truly fixed above the comic content. */
  position: fixed !important;
  top: var(--lb-header-h, 68px);
  left: 0;
  right: 0;
  z-index: 999 !important; /* one below site header */
  height: var(--lb-toolbar-h);
  background: rgba(8, 8, 12, 0.97);
  border-bottom: 1px solid rgba(123, 79, 212, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Always visible — toolbar is pinned from page load */
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
  /* Allow dropdown menus opened from toolbar buttons to overflow visibly */
  overflow: visible;
}
.lb-reader-toolbar.lb-toolbar--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lb-reader-toolbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Left: metadata */
.lb-reader-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
}
.lb-reader-toolbar__series {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.5);
  white-space: nowrap;
}
.lb-reader-toolbar__issue {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.5);
  white-space: nowrap;
}
.lb-reader-toolbar__part {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7b4fd4;
  white-space: nowrap;
}
.lb-reader-toolbar__sep {
  color: rgba(244, 242, 236, 0.2);
  font-size: 0.65rem;
}

/* Center: progress */
.lb-reader-toolbar__progress-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.lb-reader-toolbar__progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.lb-reader-toolbar__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7b4fd4, #a070f0);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(123, 79, 212, 0.6);
}
.lb-reader-toolbar__page-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  color: rgba(244, 242, 236, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.lb-reader-toolbar__page-label strong {
  color: #f4f2ec;
  font-weight: 500;
}

/* Right: controls */
.lb-reader-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.lb-reader-toolbar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(244, 242, 236, 0.55);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lb-reader-toolbar__btn:hover,
.lb-reader-toolbar__btn:focus-visible {
  color: #f4f2ec;
  background: rgba(123, 79, 212, 0.2);
  outline: none;
}
.lb-reader-toolbar__btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}
.lb-reader-toolbar__btn[aria-pressed="true"] {
  color: #7b4fd4;
  background: rgba(123, 79, 212, 0.15);
}
.lb-reader-toolbar__back-link {
  width: auto;
  padding: 0 0.6rem;
}
.lb-reader-toolbar__back-label {
  display: none; /* shown at wider breakpoints */
}

/* ── View Mode Dropdown ───────────────────────────────────────────────── */
.lb-view-mode-dropdown {
  position: relative;
  /* Visual separator from the icon-only buttons to the left */
  margin-left: 0.35rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(123, 79, 212, 0.25);
}
.lb-view-mode-btn {
  width: auto !important;
  padding: 0 0.65rem !important;
  gap: 0.4rem !important;
  font-size: 0.7rem !important;
  white-space: nowrap;
  color: rgba(244,242,236,0.85) !important;
  border: 1px solid rgba(123,79,212,0.5) !important;
  background: rgba(123,79,212,0.08) !important;
}
.lb-view-mode-btn:hover,
.lb-view-mode-btn:focus-visible,
.lb-view-mode-btn[aria-expanded="true"] {
  color: #f4f2ec !important;
  background: rgba(123,79,212,0.25) !important;
  border-color: rgba(123,79,212,0.75) !important;
}
.lb-view-mode-chevron {
  opacity: 0.6;
  transition: transform 0.18s ease;
}
.lb-view-mode-btn[aria-expanded="true"] .lb-view-mode-chevron {
  transform: rotate(180deg);
}
.lb-view-mode-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #0e0e1a;
  border: 1px solid rgba(123,79,212,0.4);
  border-radius: 8px;
  padding: 6px;
  z-index: 600;
  min-width: 200px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(123,79,212,0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* The [hidden] attribute is how the JS toggles this menu closed. Author rules
   always outrank the UA [hidden]{display:none} rule at equal specificity, so
   without this the `display: flex` above wins and the menu never collapses —
   it stays visible (just empty of pointer-events logic) whenever the toolbar
   is on screen. Restate the collapse explicitly so it actually takes effect. */
.lb-view-mode-menu[hidden] {
  display: none;
}
.lb-view-mode-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  color: rgba(244,242,236,0.7);
  text-align: left;
  width: 100%;
  transition: background 0.15s, color 0.15s;
}
.lb-view-mode-opt:hover {
  background: rgba(123,79,212,0.18);
  color: #f4f2ec;
}
.lb-view-mode-opt--active {
  background: rgba(123,79,212,0.22);
  color: #f4f2ec;
}
.lb-view-mode-opt--active::after {
  content: '✓';
  margin-left: auto;
  color: #7b4fd4;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.lb-view-mode-opt svg {
  flex-shrink: 0;
  opacity: 0.8;
}
.lb-view-mode-opt strong {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.lb-view-mode-opt em {
  display: block;
  font-style: normal;
  font-size: 0.7rem;
  color: rgba(244,242,236,0.45);
  margin-top: 2px;
  line-height: 1.3;
}


/* ============================================================
   4. VERTICAL READER (§C)
   Pages stacked vertically. Dark background, centered.
   Max width keeps pages readable without stretching.
   ============================================================ */

.lb-reader-main {
  background: #030305;
  /* Account for fixed header + toolbar (already on body but also needed for anchors) */
  scroll-margin-top: calc( var(--lb-header-h, 68px) + var(--lb-toolbar-h, 52px) );
}

/* Invisible part-start markers used by JS scroll tracker */
.lb-reader-part-start {
  height: 0;
  overflow: hidden;
  /* Offset so the part title shows in toolbar before the first page fully enters view */
  scroll-margin-top: calc( var(--lb-header-h, 68px) + var(--lb-toolbar-h, 52px) + 80px );
}

.lb-reader-page {
  display: block;
  margin: 0;
  padding: 0;
  /* Tiny gap between pages — feels intentional, not accidental */
  border-bottom: 2px solid #030305;
  scroll-margin-top: calc( var(--lb-header-h, 68px) + var(--lb-toolbar-h, 52px) );
}

.lb-reader-page__frame {
  position: relative;
  max-width: 900px; /* comfortable desktop reading width */
  margin: 0 auto;
  /* Subtle ambient glow — page floats in darkness */
  box-shadow: 0 0 60px rgba(0,0,0,0.9),
              0 0 0 1px rgba(123,79,212,0.04);
}


/* ============================================================
   5. COMIC PAGE IMAGE + PLACEHOLDER / LAZY LOAD
   ============================================================ */

.lb-reader-page__img {
  display: block;
  width: 100%;
  height: auto;
  /* Hidden until loaded — JS adds .lb-img--loaded */
  opacity: 0;
  transition: opacity 0.4s ease;
}
.lb-reader-page__img.lb-img--loaded {
  opacity: 1;
}

/* Dark placeholder shown while image loads */
.lb-reader-page__placeholder {
  position: absolute;
  inset: 0;
  background: #0c0c10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hidden once image loaded — JS removes this */
  transition: opacity 0.4s ease;
}
.lb-reader-page__placeholder.lb-placeholder--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Animated scanning line */
.lb-reader-page__placeholder-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(123,79,212,0.6) 40%,
    rgba(160,112,240,0.9) 50%,
    rgba(123,79,212,0.6) 60%,
    transparent 100%
  );
  animation: lb-scan 2.2s ease-in-out infinite;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lb-reader-page__placeholder-line { animation: none; opacity: 0.35; }
}
@keyframes lb-scan {
  0%   { top: 0%;   opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Intrinsic size holder — prevents layout shift while image loads.
   Aspect ratio 2:3 matches standard comic page proportion. */
.lb-reader-page__frame::before {
  content: '';
  display: block;
  padding-top: 150%; /* 2:3 aspect ratio */
}
.lb-reader-page__img,
.lb-reader-page__placeholder {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}


/* ============================================================
   6. PART-END TRANSITION (§E)
   Cinematic break between parts.
   ============================================================ */

.lb-reader-part-end {
  background: #07070c;
  border-top: 1px solid rgba(123,79,212,0.2);
  border-bottom: 1px solid rgba(123,79,212,0.2);
  padding: 5rem 2rem;
  text-align: center;
}
.lb-reader-part-end__inner {
  max-width: 600px;
  margin: 0 auto;
}
.lb-reader-part-end__complete-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7b4fd4;
  margin: 0.75rem 0 0.4rem;
}
.lb-reader-part-end__title {
  font-family: 'Bowlby One SC', 'Barlow Condensed', sans-serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #f4f2ec;
  line-height: 1;
  margin-bottom: 1rem;
}
.lb-reader-part-end__desc {
  font-family: 'Barlow', sans-serif;
  font-size: 0.95rem;
  color: rgba(244,242,236,0.6);
  margin-bottom: 2.5rem;
}
.lb-reader-part-end__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* Commerce variant — next part is paid and not owned (Phase 13) */
.lb-reader-part-end--commerce { border-color: rgba(255,212,0,0.25); }
.lb-reader-part-end__offer {
  margin: 0 0 2rem;
}
.lb-reader-part-end__offer-part {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #f4f2ec;
  margin: 0 0 0.35rem;
}
.lb-reader-part-end__offer-price {
  font-family: 'Bowlby One SC', 'Barlow Condensed', sans-serif;
  font-size: 1.8rem;
  color: #ffd400;
  margin: 0;
}

/* ============================================================
   7b. READER ACCESS CONTROL — locked-part screen (Phase 8)
   Replaces the page image entirely; no protected src ever reaches
   the DOM for a viewer who doesn't own this part.
   ============================================================ */
.lb-reader-locked {
  width: 100%;
  height: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(123,79,212,0.14), #0a0a14 70%);
  border: 1px solid rgba(123,79,212,0.25);
  border-radius: 10px;
  box-shadow: 0 0 80px rgba(0,0,0,0.9), 0 0 0 1px rgba(123,79,212,0.08);
}
.lb-reader-locked__inner {
  max-width: 380px;
  margin: 0 auto;
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.lb-reader-locked__eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7b4fd4;
  margin: 0 0 0.6rem;
}
.lb-reader-locked__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f4f2ec;
  line-height: 1.3;
  margin: 0 0 1.1rem;
}
.lb-reader-locked__price {
  font-family: 'Bowlby One SC', 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  color: #ffd400;
  margin: 0 0 1.4rem;
}
.lb-reader-locked__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: stretch;
}
.lb-reader-locked__ctas .lb-btn { width: 100%; justify-content: center; }
.lb-reader-locked__hint {
  margin: 1.25rem 0 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.8rem;
  color: rgba(244,242,236,0.5);
}
.lb-reader-locked__hint a { color: #a070f0; }

/* ============================================================
   7. ISSUE COMPLETE
   ============================================================ */

.lb-reader-issue-end {
  background: #05050a;
  border-top: 1px solid rgba(123,79,212,0.3);
  padding: 6rem 2rem;
  text-align: center;
}
.lb-reader-issue-end__inner {
  max-width: 640px;
  margin: 0 auto;
}
.lb-reader-issue-end__badge {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd400;
  margin: 0.75rem 0 0.4rem;
}
.lb-reader-issue-end__title {
  font-family: 'Bowlby One SC', 'Barlow Condensed', sans-serif;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: #f4f2ec;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 60px rgba(123,79,212,0.4);
}
.lb-reader-issue-end__sub {
  font-family: 'Barlow', sans-serif;
  font-size: 1rem;
  color: rgba(244,242,236,0.55);
  margin-bottom: 2.5rem;
  letter-spacing: 0.04em;
}
.lb-reader-issue-end__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* ── PHASE 15: Issue-end next-issue card ────────────────────────────────── */

.lb-issue-end-next {
  margin: 2rem 0 1.5rem;
}

.lb-issue-end-next__eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lb-yellow, #ffd400);
  margin-bottom: 0.75rem;
}

.lb-issue-end-next__card {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: left;
  max-width: 380px;
}

.lb-issue-end-next__card--soon {
  border-color: rgba(123, 79, 212, 0.3);
  background: rgba(123, 79, 212, 0.06);
}

.lb-issue-end-next__cover {
  width: 72px;
  height: 108px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.lb-issue-end-next__cover--placeholder {
  width: 72px;
  height: 108px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  flex-shrink: 0;
}

.lb-issue-end-next__info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lb-issue-end-next__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.45);
  margin: 0;
}

.lb-issue-end-next__title {
  font-family: 'Bowlby One SC', sans-serif;
  font-size: 1.05rem;
  color: var(--lb-white, #f4f2ec);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

/* Utility row: share + back ──────────────────────────────────────────────── */

.lb-reader-issue-end__util-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ── PHASE 15: "More from this series" grid ─────────────────────────────── */

.lb-issue-end-series {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 3rem 2rem 2rem;
  margin-top: 3rem;
}

.lb-issue-end-series__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.4);
  margin-bottom: 1.5rem;
}

.lb-issue-end-series__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.lb-issue-end-series__card {
  display: block;
  width: 100px;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

a.lb-issue-end-series__card:hover .lb-issue-end-series__cover-wrap {
  border-color: var(--lb-yellow, #ffd400);
  transform: translateY(-3px);
}

a.lb-issue-end-series__card:hover .lb-issue-end-series__num {
  color: var(--lb-yellow, #ffd400);
}

.lb-issue-end-series__cover-wrap {
  position: relative;
  border-radius: 6px;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
  aspect-ratio: 2 / 3;
}

.lb-issue-end-series__card--current .lb-issue-end-series__cover-wrap {
  border-color: var(--lb-yellow, #ffd400);
}

.lb-issue-end-series__card--soon .lb-issue-end-series__cover-wrap {
  opacity: 0.55;
}

.lb-issue-end-series__cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lb-issue-end-series__cover-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.lb-issue-end-series__badge {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.lb-issue-end-series__badge--reading {
  background: var(--lb-yellow, #ffd400);
  color: #000;
}

.lb-issue-end-series__badge--soon {
  background: rgba(123, 79, 212, 0.85);
  color: #fff;
}

.lb-issue-end-series__num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(244, 242, 236, 0.45);
  margin: 0.5rem 0 0;
  transition: color 0.18s;
}


/* ============================================================
   8. CONTENTS DRAWER
   Slides in from the right on desktop; full-screen on mobile.
   ============================================================ */

.lb-reader-contents {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  inset: 0;
  z-index: 1100 !important;
  /* hidden by default — JS removes [hidden] and adds .lb-contents--open */
  pointer-events: none;
}
.lb-reader-contents.lb-contents--open {
  pointer-events: auto;
}

.lb-reader-contents__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.lb-contents--open .lb-reader-contents__backdrop { opacity: 1; }

.lb-reader-contents__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: #0d0d12;
  border-left: 1px solid rgba(123,79,212,0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.lb-contents--open .lb-reader-contents__panel {
  transform: translateX(0);
}

.lb-reader-contents__header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  position: relative;
}
.lb-reader-contents__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f4f2ec;
  line-height: 1;
}
.lb-reader-contents__close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  background: transparent;
  border: none;
  color: rgba(244,242,236,0.5);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 4px;
  display: flex;
  transition: color 0.2s, background 0.2s;
}
.lb-reader-contents__close:hover,
.lb-reader-contents__close:focus-visible {
  color: #f4f2ec;
  background: rgba(255,255,255,0.07);
  outline: none;
}

.lb-reader-contents__list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0;
}

.lb-reader-contents__item { border-bottom: 1px solid rgba(255,255,255,0.05); }
.lb-reader-contents__item:last-child { border-bottom: none; }

.lb-reader-contents__part-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
  display: block;
}
.lb-reader-contents__part-btn:hover,
.lb-reader-contents__part-btn:focus-visible {
  background: rgba(123,79,212,0.1);
  outline: none;
}
.lb-reader-contents__part-btn:focus-visible {
  outline: 2px solid #7b4fd4;
  outline-offset: -2px;
}
.lb-reader-contents__part-btn:disabled {
  cursor: default;
  opacity: 0.45;
}
.lb-reader-contents__part-btn:disabled:hover {
  background: transparent;
}
.lb-reader-contents__part-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
.lb-reader-contents__part-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,242,236,0.4);
}
.lb-reader-contents__part-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,242,236,0.3);
  padding: 0.15rem 0.45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  line-height: 1.4;
  white-space: nowrap;
}
/* Status variants — set by JS */
.lb-part-status--in-progress { color: #ffd400 !important; }
.lb-part-status--complete    { color: #4ade80 !important; }

.lb-reader-contents__part-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #f4f2ec;
  line-height: 1.2;
}
.lb-reader-contents__part-pages {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  color: rgba(244,242,236,0.35);
  margin-top: 0.3rem;
  letter-spacing: 0.06em;
}

/* ── Phase 5: Bookmarks section in Contents drawer ─────────────────────────── */
.lb-reader-contents__bookmarks {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 1rem 1.5rem;
  flex-shrink: 0;
  max-height: 160px;
  overflow-y: auto;
}
.lb-reader-contents__bookmarks-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd400;
  margin-bottom: 0.6rem;
}
.lb-reader-contents__bookmarks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.lb-bookmark-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 212, 0, 0.08);
  border: 1px solid rgba(255, 212, 0, 0.3);
  color: #ffd400;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lb-bookmark-chip:hover,
.lb-bookmark-chip:focus-visible {
  background: rgba(255, 212, 0, 0.16);
  border-color: rgba(255, 212, 0, 0.55);
  outline: none;
}
.lb-bookmark-chip__remove {
  color: rgba(255, 212, 0, 0.5);
  font-size: 0.85em;
  margin-left: 0.15rem;
}
.lb-bookmark-chip__remove:hover { color: #ffd400; }

.lb-reader-contents__footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

/* ── Phase 5: Bookmark button active state (toolbar) ───────────────────────── */
.lb-reader-toolbar__btn[data-bookmarked="true"] {
  color: #ffd400;
}
.lb-reader-toolbar__btn[data-bookmarked="true"]:hover {
  background: rgba(255, 212, 0, 0.15);
}

/* ── Phase 5: Bookmark ribbon on a bookmarked page ─────────────────────────── */
.lb-reader-page__bookmark-ribbon {
  position: absolute;
  top: 0;
  right: 20px;
  width: 26px;
  height: 38px;
  background: #ffd400;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.lb-reader-page__bookmark-ribbon.lb-ribbon--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Phase 5: Share toast notification ─────────────────────────────────────── */
.lb-share-toast {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(10, 10, 16, 0.96);
  border: 1px solid rgba(123, 79, 212, 0.4);
  color: #f4f2ec;
  font-family: 'Barlow', sans-serif;
  font-size: 0.85rem;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lb-share-toast.lb-share-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


/* ============================================================
   9. FOCUS MODE
   Hides toolbar chrome, dims surrounding UI, maximises artwork.
   ============================================================ */

body.lb-focus-mode .lb-header { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
body.lb-focus-mode .lb-reader-hero { display: none; }
body.lb-focus-mode .lb-reader-toolbar { opacity: 0.15; }
body.lb-focus-mode .lb-reader-toolbar:hover,
body.lb-focus-mode .lb-reader-toolbar:focus-within { opacity: 1; }
body.lb-focus-mode .lb-reader-main { background: #020204; }
body.lb-focus-mode .lb-reader-page__frame {
  max-width: 100%;
  box-shadow: none;
}
body.lb-focus-mode { padding-top: var(--lb-toolbar-h, 52px) !important; }

/* Keyboard shortcut: F key exits focus mode */
.lb-focus-exit-hint {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(5,5,10,0.88);
  color: rgba(244,242,236,0.55);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1200;
  white-space: nowrap;
}
body.lb-focus-mode .lb-focus-exit-hint { opacity: 1; }


/* ============================================================
   PHASE 13. KEYBOARD SHORTCUTS OVERLAY
   ============================================================ */

.lb-shortcuts-overlay {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  inset: 0;
  z-index: 2100 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-shortcuts-overlay[hidden] { display: none; }

.lb-shortcuts-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 6, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.lb-shortcuts-modal {
  position: relative;
  z-index: 1;
  background: var(--lb-panel, #13121e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.75rem 2rem 1.5rem;
  min-width: 300px;
  max-width: 460px;
  width: 90vw;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  /* Fade + slide in when .lb-shortcuts--open is added */
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lb-shortcuts--open .lb-shortcuts-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lb-shortcuts-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.lb-shortcuts-modal__title {
  font-family: var(--font-display, 'Bowlby One SC', sans-serif);
  font-size: 1rem;
  color: var(--lb-white, #f4f2ec);
  margin: 0;
  letter-spacing: 0.05em;
}

.lb-shortcuts-modal__close {
  background: none;
  border: none;
  color: rgba(244, 242, 236, 0.45);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s;
}
.lb-shortcuts-modal__close:hover { color: var(--lb-white, #f4f2ec); }

.lb-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
}

.lb-shortcut-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.lb-shortcut-row dt {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 130px;
  flex-shrink: 0;
}

.lb-shortcut-row dd {
  color: rgba(244, 242, 236, 0.62);
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.95rem;
  margin: 0;
  letter-spacing: 0.01em;
}

.lb-shortcut-sep {
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.75rem;
}

/* Keyboard key chip */
.lb-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--lb-white, #f4f2ec);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  min-width: 26px;
  text-align: center;
  line-height: 1.4;
  white-space: nowrap;
}

.lb-shortcuts-modal__tip {
  margin: 1.1rem 0 0;
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.78rem;
  color: rgba(244, 242, 236, 0.33);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ============================================================
   PHASE 13. PAGE JUMP — clickable page counter + inline input
   ============================================================ */

.lb-reader-toolbar__page-label--clickable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
  margin: -2px -5px;
  transition: background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}
.lb-reader-toolbar__page-label--clickable:hover,
.lb-reader-toolbar__page-label--clickable:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

/* The number input that replaces the label when active */
.lb-page-jump-input {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--lb-yellow, #ffd400);
  border-radius: 4px;
  color: var(--lb-white, #f4f2ec);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  padding: 2px 6px;
  width: 58px;
  text-align: center;
  outline: none;
  /* Sit next to where the label was */
  position: relative;
  top: 1px;
}
/* Hide browser number spinners */
.lb-page-jump-input::-webkit-inner-spin-button,
.lb-page-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.lb-page-jump-input[type=number] { -moz-appearance: textfield; appearance: textfield; }


/* ============================================================
   PHASE 14. READER SETTINGS PANEL
   ============================================================ */

/* Popover panel — fixed, anchored below the ⚙ toolbar button */
.lb-settings-panel {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  top: calc( var(--lb-toolbar-h, 52px) + 6px );
  right: 0.75rem;
  z-index: 1600 !important;
  width: 272px;
  background: var(--lb-panel, #13121e);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.1rem 1.1rem 1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  /* Animate in */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.lb-settings-panel[hidden] { display: none; }
.lb-settings--open {
  opacity: 1;
  transform: translateY(0);
}

.lb-settings-panel__heading {
  font-family: var(--font-display, 'Bowlby One SC', sans-serif);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(244, 242, 236, 0.45);
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.lb-settings-panel__section {
  margin-bottom: 1rem;
}
.lb-settings-panel__section:last-child { margin-bottom: 0; }

.lb-settings-panel__label {
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.8rem;
  color: rgba(244, 242, 236, 0.5);
  margin: 0 0 0.5rem;
  letter-spacing: 0.04em;
}
.lb-settings-panel__label--inline { margin: 0; }

.lb-settings-panel__group {
  display: flex;
  gap: 0.45rem;
}

/* Option buttons — width + bg */
.lb-settings-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  padding: 8px 6px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: rgba(244, 242, 236, 0.55);
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.lb-settings-opt:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--lb-white, #f4f2ec);
}
.lb-settings-opt[aria-pressed="true"] {
  border-color: var(--lb-yellow, #ffd400);
  color: var(--lb-white, #f4f2ec);
  background: rgba(255, 212, 0, 0.08);
}

/* Swatch variant */
.lb-settings-opt__swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: block;
  flex-shrink: 0;
}

/* Row section (reduce motion) */
.lb-settings-panel__section--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* iOS-style toggle button */
.lb-settings-toggle {
  position: relative;
  width: 40px;
  height: 23px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.lb-settings-toggle__track {
  display: block;
  width: 40px;
  height: 23px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  transition: background 0.2s, border-color 0.2s;
}
.lb-settings-toggle[aria-pressed="true"] .lb-settings-toggle__track {
  background: var(--lb-yellow, #ffd400);
  border-color: var(--lb-yellow, #ffd400);
}
.lb-settings-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.lb-settings-toggle[aria-pressed="true"] .lb-settings-toggle__thumb {
  transform: translateX(17px);
}

/* ============================================================
   PHASE 14. BODY MODIFIER CLASSES
   Applied by JS based on stored preferences.
   ============================================================ */

/* Page width — "Compact" is the zoom-out preset: Vertical/scroll mode has no
   upper bound on page height (each page is a full 2:3 image at whatever width
   the frame allows), so on anything but a narrow viewport "Comfy" (900px) can
   still read as an oversized, all-consuming column. Compact gives users a
   real way to shrink it down instead of only being able to go wider/full. */
body.lb-width-compact .lb-reader-page__frame { max-width: 620px; }
body.lb-width-wide .lb-reader-page__frame  { max-width: 960px; }
body.lb-width-full .lb-reader-page__frame  { max-width: 100%; box-shadow: none; }
body.lb-width-full .lb-reader-page__img    { border-radius: 0; }

/* Background */
body.lb-bg-darker .lb-reader-main { background: #050508; }
body.lb-bg-black  .lb-reader-main { background: #000; }
body.lb-bg-sepia  .lb-reader-main { background: #120e08; }

/* Reduce motion — only override when OS has NOT already reduced motion */
@media (prefers-reduced-motion: no-preference) {
  body.lb-reduced-motion *,
  body.lb-reduced-motion *::before,
  body.lb-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── PHASE 16. MOBILE GESTURES ──────────────────────────────────────────────── */

/* Swipe navigation toast — pill that appears bottom-center after a part swipe */
.lb-swipe-toast {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(5, 5, 10, 0.9);
  color: var(--lb-white, #f4f2ec);
  font-family: var(--font-ui, 'Barlow Condensed', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.45rem 1.25rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 1900;
  white-space: nowrap;
}
.lb-swipe-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Double-tap bookmark confirmation circle */
.lb-bookmark-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 70px;
  height: 70px;
  background: rgba(5, 5, 10, 0.78);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lb-yellow, #ffd400);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
  z-index: 200;
}
.lb-bookmark-pop--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.lb-bookmark-pop--out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

/* ── PHASE 22: Streak badge ──────────────────────────────────────────────────
   Displayed in the toolbar right-controls strip for logged-in users.
   Hidden (via [hidden]) until the streak ping returns a current > 0.
   ───────────────────────────────────────────────────────────────────────── */
.lb-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 8px;
  height: 32px;
  background: rgba(255, 212, 0, 0.12);
  border: 1px solid rgba(255, 212, 0, 0.35);
  border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--lb-yellow);
  white-space: nowrap;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

.lb-streak-badge--fire {
  animation: lb-streak-pulse 0.45s ease 4;
}

@keyframes lb-streak-pulse {
  0%   { transform: scale(1);    background: rgba(255, 212, 0, 0.12); }
  50%  { transform: scale(1.18); background: rgba(255, 212, 0, 0.35); }
  100% { transform: scale(1);    background: rgba(255, 212, 0, 0.12); }
}


/* ============================================================
   10. RESPONSIVE — TABLET / MOBILE
   ============================================================ */

/* Tablet: 768px–1024px */
@media (max-width: 1024px) {
  .lb-reader-page__frame { max-width: 780px; }
  .lb-reader-toolbar__back-label { display: inline; }
  .lb-reader-toolbar__back-link { width: auto; }
}

/* Mobile: ≤767px */
@media (max-width: 767px) {

  :root { --lb-toolbar-h: 48px; }

  body.lb-reader-page {
    padding-top: calc( var(--lb-header-h, 68px) + var(--lb-toolbar-h, 48px) );
  }

  /* Hero: stack cover + content vertically on mobile */
  .lb-reader-hero {
    padding: 2.5rem 1.25rem 2.5rem;
  }
  .lb-reader-hero__title {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
  }
  .lb-reader-hero__ctas {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Toolbar: hide series/issue labels, keep progress + controls */
  .lb-reader-toolbar__series,
  .lb-reader-toolbar__issue,
  .lb-reader-toolbar__sep--mobile-hide { display: none; }
  .lb-reader-toolbar__meta { gap: 0; }
  .lb-reader-toolbar__inner { gap: 0.75rem; padding: 0 1rem; }

  /* Secondary options collapse: zoom is covered by pinch/double-tap on touch,
     and shortcuts reference a keyboard that doesn't exist on mobile — both
     free up real toolbar space instead of sitting in the scroll strip. */
  #lb-zoom-in-btn, #lb-zoom-out-btn, #lb-zoom-reset-btn,
  #lb-shortcuts-btn {
    display: none;
  }

  /* Reader: full width pages */
  .lb-reader-page__frame {
    max-width: 100%;
    box-shadow: none;
  }

  /* Part end: tighter spacing */
  .lb-reader-part-end { padding: 3.5rem 1.25rem; }
  .lb-reader-part-end__ctas { flex-direction: column; align-items: center; }
  .lb-reader-issue-end { padding: 4rem 1.25rem; }
  .lb-reader-issue-end__ctas { flex-direction: column; align-items: center; }
  .lb-issue-end-series { padding: 2rem 1.25rem 1.5rem; }
  .lb-issue-end-series__grid { gap: 0.75rem; }
  .lb-issue-end-series__card { width: 80px; }
  .lb-issue-end-next__card { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Very narrow: ≤380px */
@media (max-width: 380px) {
  .lb-reader-toolbar__btn { width: 30px; height: 30px; }
  .lb-reader-toolbar__progress-wrap { gap: 0.5rem; }
}


/* ============================================================
   11. FLIPBOOK READER MODE
   A contained single-page viewer with page-flip animation.
   Toggled via the toolbar mode button (lb-flip-mode-btn).
   Default mode. Scroll mode is the legacy fallback.
   ============================================================ */

/* ── Stage: fills the viewport between toolbar and footer ── */
.lb-reader-main.lb-mode-flipbook {
  height: calc(100dvh - var(--lb-header-h, 68px) - var(--lb-toolbar-h, 52px));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #030305;
}

/* In flipbook mode all pages are stacked; only the active one is shown */
.lb-mode-flipbook .lb-reader-page {
  position: absolute;
  inset: 0;
  display: none;
  margin: 0;
  padding: 0;
  border-bottom: none;
  align-items: center;
  justify-content: center;
}
.lb-mode-flipbook .lb-reader-page.lb-page-active {
  display: flex;
}

/* Part separators and part-end sections hidden in flipbook mode */
.lb-mode-flipbook .lb-reader-part-start,
.lb-mode-flipbook .lb-reader-part-end {
  display: none;
}

/* ── Page frame: natural portrait image sized to stage height ── */
.lb-mode-flipbook .lb-reader-page__frame {
  position: relative;
  /* kill the padding-top aspect-ratio holder */
  width: auto;
  max-width: calc(100vw - 160px);   /* room for nav arrows */
  height: calc(100dvh - var(--lb-header-h, 68px) - var(--lb-toolbar-h, 52px) - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a14;
  box-shadow:
    0 0 80px rgba(0,0,0,0.95),
    0 0 0 1px rgba(123,79,212,0.08),
    -4px 0 20px rgba(0,0,0,0.6),   /* subtle spine shadow */
    4px 0 20px rgba(0,0,0,0.6);
}
.lb-mode-flipbook .lb-reader-page__frame::before {
  display: none; /* kill the 2:3 padding-top holder */
}
.lb-mode-flipbook .lb-reader-page__img {
  position: relative !important;
  width: auto;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  opacity: 1 !important;
  display: block;
}
.lb-mode-flipbook .lb-reader-page__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Page-flip animations — genuine 3D book-page turn ──
   "Next" direction: current page folds away to the left (like turning a right-hand page),
   new page swings in from the right.
   "Prev" direction: mirror image.

   Realism fix: a page turn has to pivot on the spine, not on the page's own
   center. Previously these keyframes rotated around the default center
   origin and faked the hinge with a translateX drift — which reads as the
   whole page sliding/collapsing sideways, not a leaf turning on a binding.
   Pinning transform-origin to the actual edge (left = forward/next, right =
   backward/prev, set below) and rotating in place is what makes the edge
   stay put while the rest of the page arcs away in 3D — a real page turn. */

/* Going forward: current page pivots on its left edge and swings away */
@keyframes lb-flip-out-next {
  0%   { transform: perspective(1600px) rotateY(0deg);     filter: brightness(1);    }
  60%  { transform: perspective(1600px) rotateY(-72deg);   filter: brightness(0.45); }
  100% { transform: perspective(1600px) rotateY(-100deg);  filter: brightness(0.15); }
}
/* Going forward: new page pivots on the same left edge, swinging into place */
@keyframes lb-flip-in-next {
  0%   { transform: perspective(1600px) rotateY(100deg);   filter: brightness(0.15); }
  40%  { transform: perspective(1600px) rotateY(72deg);    filter: brightness(0.45); }
  100% { transform: perspective(1600px) rotateY(0deg);     filter: brightness(1);    }
}
/* Going back: current page pivots on its right edge and swings away */
@keyframes lb-flip-out-prev {
  0%   { transform: perspective(1600px) rotateY(0deg);     filter: brightness(1);    }
  60%  { transform: perspective(1600px) rotateY(72deg);    filter: brightness(0.45); }
  100% { transform: perspective(1600px) rotateY(100deg);   filter: brightness(0.15); }
}
/* Going back: new page pivots on the same right edge, swinging into place */
@keyframes lb-flip-in-prev {
  0%   { transform: perspective(1600px) rotateY(-100deg);  filter: brightness(0.15); }
  40%  { transform: perspective(1600px) rotateY(-72deg);   filter: brightness(0.45); }
  100% { transform: perspective(1600px) rotateY(0deg);     filter: brightness(1);    }
}

/* The animation classes land on the outer <figure class="lb-reader-page">
   (JS toggles them there), but that figure is an edge-to-edge, inset:0 stage
   box — its own left/right edge sits well past the nav arrows, out in empty
   space. The actual portrait page is the centered .lb-reader-page__frame
   child inside it. Pivoting the outer figure "looked" center-hinged even
   with transform-origin fixed, because the visible page just rides along
   near the middle of that much wider box. Animate the frame itself instead,
   so the hinge lands exactly on the visible page's own edge. */
.lb-mode-flipbook .lb-reader-page.lb-flip-out-next .lb-reader-page__frame,
.lb-mode-flipbook .lb-reader-page.lb-flip-in-next  .lb-reader-page__frame {
  transform-origin: left center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lb-mode-flipbook .lb-reader-page.lb-flip-out-prev .lb-reader-page__frame,
.lb-mode-flipbook .lb-reader-page.lb-flip-in-prev  .lb-reader-page__frame {
  transform-origin: right center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Out animation plays fast; in animation starts slightly delayed so they overlap mid-turn */
.lb-mode-flipbook .lb-reader-page.lb-flip-out-next .lb-reader-page__frame { animation: lb-flip-out-next 0.36s cubic-bezier(0.4, 0, 0.6, 1) both; }
.lb-mode-flipbook .lb-reader-page.lb-flip-in-next  .lb-reader-page__frame { animation: lb-flip-in-next  0.42s cubic-bezier(0.2, 0, 0.4, 1) 0.2s both; }
.lb-mode-flipbook .lb-reader-page.lb-flip-out-prev .lb-reader-page__frame { animation: lb-flip-out-prev 0.36s cubic-bezier(0.4, 0, 0.6, 1) both; }
.lb-mode-flipbook .lb-reader-page.lb-flip-in-prev  .lb-reader-page__frame { animation: lb-flip-in-prev  0.42s cubic-bezier(0.2, 0, 0.4, 1) 0.2s both; }

/* ── Slide animation ── */
@keyframes lb-slide-in-next  { from { transform: translateX(100%); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } }
@keyframes lb-slide-out-next { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0.7; } }
@keyframes lb-slide-in-prev  { from { transform: translateX(-100%); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } }
@keyframes lb-slide-out-prev { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0.7; } }

.lb-mode-flipbook .lb-reader-page.lb-slide-out-next { animation: lb-slide-out-next 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
.lb-mode-flipbook .lb-reader-page.lb-slide-in-next  { animation: lb-slide-in-next  0.34s cubic-bezier(0, 0, 0.2, 1) 0.14s both; }
.lb-mode-flipbook .lb-reader-page.lb-slide-out-prev { animation: lb-slide-out-prev 0.3s cubic-bezier(0.4, 0, 1, 1) both; }
.lb-mode-flipbook .lb-reader-page.lb-slide-in-prev  { animation: lb-slide-in-prev  0.34s cubic-bezier(0, 0, 0.2, 1) 0.14s both; }

/* ── Fade / dissolve animation ── */
@keyframes lb-fade-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } }
@keyframes lb-fade-in  { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.lb-mode-flipbook .lb-reader-page.lb-fade-out { animation: lb-fade-out 0.22s ease-in  both; }
.lb-mode-flipbook .lb-reader-page.lb-fade-in  { animation: lb-fade-in  0.28s ease-out 0.14s both; }

/* Issue-end: now lives outside <main>; hidden until last page reached */
.lb-reader-issue-end[hidden] { display: none; }
.lb-reader-issue-end {
  display: block; /* override any flex/grid from parent */
}
.lb-reader-toolbar__anim-wrap {
  display: none; /* moved to settings panel */
}
.lb-anim-picker {
  display: none; /* functional but hidden — synced from settings panel buttons */
}

/* Reduce motion: cut animation, keep visibility change */
@media (prefers-reduced-motion: reduce) {
  .lb-mode-flipbook .lb-reader-page.lb-flip-in-next,
  .lb-mode-flipbook .lb-reader-page.lb-flip-out-next,
  .lb-mode-flipbook .lb-reader-page.lb-flip-in-prev,
  .lb-mode-flipbook .lb-reader-page.lb-flip-out-prev {
    animation: none;
  }
}

/* ── Flipbook prev / next navigation arrows ── */
.lb-flipbook-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 52px;
  height: 88px;
  background: rgba(5,5,10,0.72);
  border: 1px solid rgba(123,79,212,0.22);
  border-radius: 6px;
  color: rgba(244,242,236,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.lb-flipbook-nav-btn:hover {
  background: rgba(123,79,212,0.35);
  border-color: rgba(123,79,212,0.55);
  color: #f4f2ec;
}
.lb-flipbook-nav-btn:disabled {
  opacity: 0.18;
  pointer-events: none;
}
.lb-flipbook-nav-btn--prev { left: 0.75rem; }
.lb-flipbook-nav-btn--next { right: 0.75rem; }

/* ── In-stage page counter ── */
.lb-flipbook-counter {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.67rem;
  color: rgba(244,242,236,0.4);
  background: rgba(5,5,10,0.65);
  padding: 0.22rem 0.85rem;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0.06em;
}

/* ── Mode toggle button active state ── */
.lb-reader-toolbar__btn.lb-mode-btn--active {
  color: #ffd400;
  background: rgba(255,212,0,0.1);
}

/* ── Scrollbar hint arrow (short pulse, appears first time) ── */
.lb-flipbook-swipe-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,242,236,0.45);
  animation: lb-hint-fade 3.5s ease 1s both;
  pointer-events: none;
}
@keyframes lb-hint-fade {
  0%,100% { opacity: 0; }
  25%,75%  { opacity: 1; }
}

/* ── Mobile: smaller arrows, no backdrop in flipbook mode ── */
@media (max-width: 767px) {
  .lb-flipbook-nav-btn {
    width: 38px;
    height: 64px;
  }
  .lb-flipbook-nav-btn--prev { left: 0.25rem; }
  .lb-flipbook-nav-btn--next { right: 0.25rem; }
  .lb-mode-flipbook .lb-reader-page__frame {
    max-width: calc(100vw - 100px);
  }
}


/* ============================================================
   12. BOTTOM PAGE SLIDER
   ============================================================ */
.lb-reader-pageslider {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 998 !important;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 1.25rem;
  background: rgba(5,5,8,0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.lb-reader-pageslider__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  color: rgba(244,242,236,0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.lb-reader-pageslider__input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.14);
  cursor: pointer;
  outline: none;
}
.lb-reader-pageslider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7b4fd4;
  border: 2px solid #f4f2ec;
  cursor: pointer;
  margin-top: -5px;
}
.lb-reader-pageslider__input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7b4fd4;
  border: 2px solid #f4f2ec;
  cursor: pointer;
  border: none;
}
.lb-reader-pageslider__input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #7b4fd4 var(--lb-slider-pct, 0%), rgba(255,255,255,0.14) var(--lb-slider-pct, 0%));
}
body.lb-reader-active { padding-bottom: 40px; } /* room for the fixed slider bar */

/* Hide the slider while the Contents/Thumbnails/Bookmarks drawer is open, in
   focus/fullscreen auto-hide state, or on very short viewports. */
body.lb-focus-mode.lb-controls-hidden .lb-reader-pageslider,
body.lb-fullscreen-active.lb-controls-hidden .lb-reader-pageslider {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

/* ============================================================
   13. THUMBNAILS DRAWER
   Mirrors the Contents drawer pattern — right-side slide-in panel,
   grid of page thumbnails instead of a parts list.
   ============================================================ */
.lb-thumbs-drawer {
  position: fixed !important; /* see .lb-reader-toolbar comment re: background.css override */
  inset: 0;
  z-index: 1100 !important;
  pointer-events: none;
}
.lb-thumbs-drawer.lb-thumbs--open { pointer-events: auto; }

.lb-thumbs-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.lb-thumbs--open .lb-thumbs-drawer__backdrop { opacity: 1; }

.lb-thumbs-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: #0d0d12;
  border-left: 1px solid rgba(123,79,212,0.22);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.lb-thumbs--open .lb-thumbs-drawer__panel { transform: translateX(0); }

.lb-thumbs-drawer__header {
  padding: 1.5rem 1.5rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.lb-thumbs-drawer__close {
  background: transparent;
  border: none;
  color: rgba(244,242,236,0.6);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
}
.lb-thumbs-drawer__close:hover { color: #f4f2ec; }

.lb-thumbs-drawer__grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 1.25rem;
}
.lb-thumbs-drawer__item {
  /* Classic percentage-padding aspect-ratio box instead of the `aspect-ratio`
     property: as a CSS Grid item with implicit (auto) row sizing, a <button>
     with `aspect-ratio` produced badly under-sized/overlapping row tracks —
     this technique sizes unambiguously off the resolved column width. */
  position: relative;
  height: 0;
  padding: 0 0 150% 0; /* 150% of width = a 2:3 (width:height) box */
  background: #050508;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.lb-thumbs-drawer__item:hover { transform: translateY(-2px); }
.lb-thumbs-drawer__item:focus-visible,
.lb-thumbs-drawer__item.lb-thumb--current {
  border-color: #7b4fd4;
}
.lb-thumbs-drawer__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lb-thumbs-drawer__item img.lb-thumb--loaded { opacity: 1; }
.lb-thumbs-drawer__item-num {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  color: #f4f2ec;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ============================================================
   14. ZOOM & PAN
   ============================================================ */
.lb-mode-flipbook .lb-reader-page.lb-page-active .lb-reader-page__frame {
  transition: transform 0.15s ease-out;
  transform: scale(var(--lb-zoom, 1)) translate(var(--lb-pan-x, 0px), var(--lb-pan-y, 0px));
  transform-origin: center center;
}
.lb-reader-main:not(.lb-mode-flipbook) {
  transition: transform 0.15s ease-out;
  transform: scale(var(--lb-zoom, 1));
  transform-origin: top center;
}
.lb-reader-main--zoomed.lb-mode-flipbook {
  cursor: grab;
}
.lb-reader-main--zoomed.lb-mode-flipbook.lb-reader-main--panning {
  cursor: grabbing;
}
.lb-reader-main--zoomed.lb-mode-flipbook .lb-reader-page.lb-page-active .lb-reader-page__frame {
  transition: none; /* instant response while actively dragging/pinching */
}

/* ============================================================
   15. TWO-PAGE SPREAD (flipbook mode, wide screens only)
   ============================================================ */
.lb-mode-flipbook.lb-mode-spread .lb-reader-page__frame {
  max-width: calc(50vw - 100px);
}
.lb-mode-flipbook.lb-mode-spread .lb-reader-page.lb-page-active,
.lb-mode-flipbook.lb-mode-spread .lb-reader-page.lb-page-active-spread {
  display: flex;
}
/* Each page gets its own half of the stage and hugs the spine. Before this,
   both figures spanned the full stage and the frame's `margin: 0 auto`
   (from the scroll-mode rule) overrode justify-content, so the two pages
   rendered on top of each other in the centre and only one was visible. */
.lb-mode-flipbook.lb-mode-spread .lb-reader-page__frame {
  margin: 0;
}
.lb-mode-flipbook.lb-mode-spread .lb-reader-page.lb-page-active {
  inset: 0 50% 0 0;
  justify-content: flex-end;
  padding-right: 2px;
}
.lb-mode-flipbook.lb-mode-spread .lb-reader-page.lb-page-active-spread {
  inset: 0 0 0 50%;
  justify-content: flex-start;
  padding-left: 2px;
}
@media (max-width: 1023px) {
  /* Spread mode auto-falls back to single page on smaller screens */
  .lb-mode-flipbook.lb-mode-spread .lb-reader-page.lb-page-active-spread { display: none !important; }
  .lb-mode-flipbook.lb-mode-spread .lb-reader-page__frame { max-width: calc(100vw - 160px); }
  #lb-spread-btn { display: none; }
}

/* ============================================================
   16. FULLSCREEN
   ============================================================ */
body.lb-fullscreen-active .lb-reader-toolbar,
body.lb-fullscreen-active .lb-reader-pageslider {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.lb-fullscreen-active.lb-controls-hidden .lb-reader-toolbar {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
body.lb-fullscreen-active.lb-controls-hidden .lb-reader-pageslider {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.lb-fullscreen-active .lb-reader-toolbar,
  body.lb-fullscreen-active .lb-reader-pageslider,
  .lb-mode-flipbook .lb-reader-page.lb-page-active .lb-reader-page__frame,
  .lb-reader-main:not(.lb-mode-flipbook) {
    transition: none !important;
  }
}

/* Mobile: hide the compact zoom-level readout and thumbnails grid gets narrower */
@media (max-width: 480px) {
  .lb-reader-toolbar__btn--zoomlevel { min-width: 40px; font-size: 0.62rem; }
  .lb-thumbs-drawer__grid { grid-template-columns: repeat(2, 1fr); }
  .lb-reader-pageslider__label { font-size: 0.62rem; }
}


/* ============================================================
   17. COMIC BOOK PAGE TURN (lanobots-comic-reader.js → comicTurn)
   A single two-sided leaf hinged on the spine (its left edge). Faces are
   clones of the real page frames; the shade layers darken each face as it
   tilts away from the light, and the cast layer is the shadow the lifting
   leaf throws on the page it uncovers.
   ============================================================ */
.lb-leaf,
.lb-leaf-standin,
.lb-leaf-cast {
  position: absolute;
  pointer-events: none;
}
.lb-leaf-cast     { z-index: 13; }
.lb-leaf-standin  { z-index: 14; }
.lb-leaf {
  z-index: 15;
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.lb-leaf__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: #0a0a14;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}
.lb-leaf__face--back { transform: rotateY(180deg); }
.lb-leaf__content,
.lb-leaf-standin .lb-leaf__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Back of a single page: printed-paper reverse, not another page */
.lb-leaf__content--paper {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(123,79,212,0.10), transparent 60%),
    linear-gradient(90deg, #191926 0%, #11111b 60%, #0c0c14 100%);
}
.lb-leaf__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
}
/* Front face: darkest along the spine, a soft highlight near the free edge */
.lb-leaf__face--front .lb-leaf__shade {
  background: linear-gradient(to right,
    rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%,
    rgba(255,255,255,0.07) 82%, rgba(0,0,0,0.3) 100%);
}
/* Back face is mirrored (rotateY 180), so its spine is on the right */
.lb-leaf__face--back .lb-leaf__shade {
  background: linear-gradient(to left,
    rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 35%,
    rgba(255,255,255,0.07) 82%, rgba(0,0,0,0.3) 100%);
}
.lb-leaf-cast {
  opacity: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0) 70%);
}
.lb-leaf-cast--left {
  background: linear-gradient(to left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0) 70%);
}

/* ============================================================
   18. END-OF-PART NOTICE (page-flip modes)
   ============================================================ */
.lb-part-notice {
  /* !important: lanobots-background.css forces position:relative/z-index:1
     on every direct child of <body> (same override the toolbar works around) */
  position: fixed !important;
  left: 50%;
  bottom: 64px; /* clears the bottom page slider */
  z-index: 60 !important;
  width: min(520px, calc(100vw - 32px));
  padding: 1rem 1.15rem 1.1rem;
  background: rgba(12,12,20,0.96);
  border: 1px solid rgba(123,79,212,0.55);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  color: #f4f2ec;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lb-part-notice[hidden] { display: none; }
.lb-part-notice--in { opacity: 1; transform: translate(-50%, 0); }
.lb-part-notice__close {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: rgba(244,242,236,0.6);
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 50%;
}
.lb-part-notice__close:hover { color: #f4f2ec; background: rgba(255,255,255,0.08); }
.lb-part-notice__eyebrow {
  margin: 0 0 0.3rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd400;
}
.lb-part-notice__title {
  margin: 0 2rem 0.85rem 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}
.lb-part-notice__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lb-part-notice__ctas .amount { color: inherit; }
.lb-part-notice__hint {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: rgba(244,242,236,0.6);
}
.lb-part-notice__hint a { color: #b89cff; }
@media (prefers-reduced-motion: reduce) {
  .lb-part-notice { transition: none; }
}