/* ============================================================
   COMIC READER APP - Book Interface
   ============================================================ */

.comic-content {
  position: relative;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

/* ── Book Viewport ───────────────────────────────────────── */

.comic-book-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1800px;
  perspective-origin: 50% 50%;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}

.comic-book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.comic-book.closed {
  transform: translateX(-25%);
}

/* ── Page Leaf ───────────────────────────────────────────── */

.comic-page {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.0);
  cursor: pointer;
}

.comic-page.flipped {
  transform: rotateY(-180deg);
}

.comic-page:not(.flipped):hover {
  transform: rotateY(-5deg);
  transition: transform 0.3s ease;
}

/* ── Page Faces ──────────────────────────────────────────── */

.comic-page-front,
.comic-page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #f5f5f0;
}

.comic-page-front {
  z-index: 1;
}

.comic-page-back {
  transform: rotateY(180deg);
}

.comic-page-front > img,
.comic-page-back > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  background: #f5f5f0;
}

/* ── Cover Page Background ──────────────────────────────── */

.comic-page[data-leaf="0"] .comic-page-front {
  background: linear-gradient(to bottom, #ef4f26, #ed6b1d);
}

.comic-page[data-leaf="0"] .comic-page-front img {
  background: transparent;
}

.comic-page[data-leaf="0"] .comic-page-front::after {
  display: none;
}

/* ── Spine Shadow ────────────────────────────────────────── */

.comic-page-front::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.15), transparent);
  pointer-events: none;
}

.comic-page-back::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.15), transparent);
  pointer-events: none;
}

/* ── Page Indicator (subtle overlay) ─────────────────────── */

.comic-page-indicator {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-family: system-ui, -apple-system, sans-serif;
  pointer-events: none;
}

/* ── Single Page Mode ────────────────────────────────────── */

.comic-book.single-page {
  max-width: 450px;
}

.comic-book.single-page .comic-page {
  width: 100%;
  left: 0;
  transform-origin: center center;
}

.comic-book.single-page .comic-page-front::after,
.comic-book.single-page .comic-page-back::after {
  display: none;
}

/* ── Mobile Responsive ───────────────────────────────────── */

@media (max-width: 768px) {
  .comic-book-viewport {
    perspective: none;
  }

  .comic-book {
    width: 100%;
    height: 100%;
  }

  .comic-book.closed {
    transform: none;
  }

  .comic-book .comic-page {
    width: 100%;
    left: 0;
    transform-origin: center center;
    transform: translateX(0);
    transition: transform 0.4s ease;
  }

  .comic-book .comic-page.flipped {
    transform: translateX(-100%);
  }

  .comic-book .comic-page.dragging {
    transition: none;
  }

  .comic-book .comic-page:not(.flipped):not(.dragging):hover {
    transform: translateX(0);
  }

  .comic-book .comic-page-front::after,
  .comic-book .comic-page-back::after {
    display: none;
  }
}

/* ============================================================
   FRAMELESS IMMERSIVE WINDOW
   ============================================================ */

#comic-window .window-header {
  display: none;
}

#comic-window,
#comic-window.focused {
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  outline: none !important;
  padding: 0 !important;
}

#comic-window .window-content {
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: none;
}

/* ── Close X Letter (directly on page) ─────────────────────── */

.comic-close-btn,
.comic-close-btn:hover,
.comic-close-btn:active,
.comic-close-btn:focus {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.2s ease;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.comic-close-btn:hover {
  transform: scale(1.3) rotate(15deg);
}

/* Non-cover pages: bottom-left on back face */
/* Back face is rotateY(180deg) — CSS left = visual left in mirrored space */
.comic-close-btn-left,
.comic-close-btn-left:hover,
.comic-close-btn-left:active,
.comic-close-btn-left:focus {
  top: auto;
  right: auto;
  bottom: 10px;
  left: 10px;
}

.comic-close-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Resize Handle (visible on frameless window) ─────────── */

/* Hide default window resize handle — we use one inside the page instead */
#comic-window > .resize-handle {
  display: none;
}

/* Resize handle that lives inside the comic page (follows 3D transforms) */
.comic-page .resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  z-index: 20;
  opacity: 0.35;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.8) 60%,
    transparent 60%,
    transparent 70%,
    rgba(255, 255, 255, 0.8) 70%,
    rgba(255, 255, 255, 0.8) 80%,
    transparent 80%,
    transparent 90%,
    rgba(255, 255, 255, 0.8) 90%
  );
  touch-action: none;
}

/* Back face is mirrored (rotateY 180deg) — flip to left so it appears bottom-right visually */
.comic-page-back .resize-handle {
  right: auto;
  left: 0;
}

.comic-page .resize-handle:hover {
  opacity: 0.9;
}

/* ── Improved Page Indicator ───────────────────────────────── */

.comic-page-indicator {
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}