/* comics.css — updated to keep the episode title centered and avoid page rendering artifacts */

/* Reader header / title centering (robust on wide screens) */
.comics-reader-wrap .reader-header { position: relative; }

/* Default (mobile and narrow) – title stays in normal flow and centered */
.comics-reader-wrap .reader-header .comics-title {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  color: #222;
  font-weight: 600;
}

/* Controls layout */
.comics-reader-wrap .reader-header .controls-wrapper,
.comics-reader-wrap .reader-header .comics-controls {
  margin-top: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
}

/* On medium+ screens absolutely center the title so it cannot be pushed left/right
   while keeping controls aligned to the right. Uses !important to defeat competing rules. */
@media (min-width: 768px) {
  .comics-reader-wrap .reader-header .comics-title {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 0.6rem !important;
    width: auto !important;
    text-align: center !important;
    margin: 0 !important;
    color: #222 !important;
    font-weight: 600 !important;
    z-index: 9999 !important;
  }

  .comics-reader-wrap .reader-header .controls-wrapper,
  .comics-reader-wrap .reader-header .comics-controls {
    margin-top: 3.0rem !important;
    justify-content: flex-end !important;
  }
}

/* Keep link color inside title consistent (avoid purple from theme) */
.comics-reader-wrap .reader-header .comics-title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Reader container */
.comics-reader-wrap { padding: 30px 0; background: transparent; }
.comics-reader-wrap .reader-header { margin-bottom: 12px; }

/* Container and stage */
.comics-container { width: 100%; max-width: 1200px; margin: 0 auto; }

/* Make the stage a true clipping container and set a safe background so
   you don't see 'ghost' edges of previous pages. The color uses a CSS variable
   so you can tweak it site-wide if needed; default to white. */
.comics-stage {
  position: relative;
  height: 650px;
  perspective: 1400px;
  overflow: hidden;               /* clip pages so previous can't peek out */
  background-color: var(--reader-bg, #ffffff);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Page stacking: absolute so pages overlap; non-active pages are invisible and non-interactive.
   Keep transforms for left/right/active states but ensure pointer-events and opacity control visibility. */
.comics-stage .comics-page {
  position: absolute;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0 */
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .54s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  background-color: var(--reader-bg, #ffffff);
}

/* Keep the original 3D / flip-like styles (left/right/active) but fit them to the absolute stacking */
.comics-stage .comics-page.left {
  transform: translateX(-20%) scale(0.9) rotateY(-20deg);
  opacity: 0.5;
}
.comics-stage .comics-page.right {
  transform: translateX(20%) scale(0.9) rotateY(20deg);
  opacity: 0.5;
}
.comics-stage .comics-page.active {
  transform: translateX(0) scale(1) rotateY(0deg);
  opacity: 1;
  z-index: 5;
  pointer-events: auto;
}

/* Images: ensure they don't show background halos and use contain to preserve aspect */
.comics-stage .comics-page img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.12);
  object-fit: contain;
  background-color: var(--reader-bg, #ffffff);
}

/* Navigation and thumbnails */
.comics-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:14px; }
.comics-nav .thumbnails { display:flex; gap:8px; overflow:auto; padding:8px 0; max-width:80%; align-items:center; }
.comics-nav .thumb { width:64px; height:64px; object-fit:cover; border-radius:4px; cursor:pointer; opacity:0.6; border:2px solid transparent; }
.comics-nav .thumb.active { opacity:1; border-color:#8739C2; box-shadow:0 6px 20px rgba(135,57,194,0.12); }

/* Controls input styling */
.comics-controls input,
.comics-controls #comics-page-input {
  padding:6px 10px;
  border-radius:6px;
  border:1px solid #ddd;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comics-stage { height: 520px; }
  .comics-nav .thumbnails { max-width:60%; }
}

/* Accessibility / safety: hide overflow on images and prevent selection flicker */
.comics-stage img { -webkit-user-select: none; user-select: none; -webkit-transform: translateZ(0); transform: translateZ(0); }

/* Fallback: if JavaScript doesn't hide previous pages after transitions,
   make sure off-screen pages do not show by limiting their visible area */
.comics-stage .comics-page:not(.active) {
  /* keep opacity transition, but ensure they do not receive pointer events */
  pointer-events: none;
}