/* Book sizing is driven by stage container queries in book.css.
   Layout mode: body.layout-landscape | body.layout-portrait */

body.layout-portrait .book-wrapper {
  perspective: 1800px;
}

body.layout-landscape .book-wrapper {
  perspective: 2500px;
}

/* Simulated landscape: rotate entire app when portrait hold + landscape layout */
body.landscape-sim {
  overflow: hidden;
}

body.landscape-sim .app {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100dvh;
  height: 100vw;
  max-width: 100dvh;
  max-height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

/* Phone held landscape: maximize book in short stage */
@media (max-height: 480px) {
  body.layout-landscape.viewport-wide .stage {
    padding: 0.1rem 0.35rem;
  }

  body.layout-landscape.viewport-wide .book {
    width: min(98cqw, calc(100cqh * 1440 / 520));
    height: 100cqh;
    max-height: 100%;
  }
}

/* Landscape: compact story header for half-page width */
body.layout-landscape .page-content--story {
  padding: 0.4rem 0.5rem 0.35rem;
}

body.layout-landscape .page-content--story .story-header {
  margin-bottom: 0.2rem;
  padding-bottom: 0.2rem;
}

body.layout-landscape .page-content--story .story-title-row {
  margin-bottom: 0.1rem;
}

body.layout-landscape .page-content--story h2 {
  font-size: clamp(0.82rem, 2vh, 0.95rem);
  letter-spacing: 0.04em;
}

body.layout-landscape .page-content--story .story-theme {
  font-size: 0.58rem;
  padding: 0.08rem 0.3rem;
}

body.layout-landscape .page-content--story .story-meta {
  font-size: 0.58rem;
  line-height: 1.25;
  gap: 0.15rem 0.25rem;
}

body.layout-landscape .page-content--story .story-body {
  font-size: clamp(0.7rem, 1.55vh, 0.8rem);
  line-height: 1.62;
}

/* Portrait spread book typography (when wide viewport uses landscape layout) */
body.layout-portrait .page-content--story .story-body {
  font-size: clamp(0.88rem, 3.2vw, 1rem);
  line-height: 1.85;
}

body.layout-portrait .page-content {
  padding: clamp(0.75rem, 3vw, 1.25rem);
}

body.layout-portrait .stage {
  padding: 0.25rem 0.5rem;
}

body.layout-landscape .stage {
  padding: 0.35rem 1rem;
}

/* Mobile flip edge buttons */
.mobile-flip-hints {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.mobile-flip-hint {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 72px;
  padding: 0;
  border: none;
  border-radius: 0 6px 6px 0;
  background: rgba(26, 21, 16, 0.45);
  color: rgba(244, 234, 213, 0.85);
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-flip-hint--prev {
  left: 0;
  border-radius: 0 6px 6px 0;
}

.mobile-flip-hint--next {
  right: 0;
  border-radius: 6px 0 0 6px;
}

.mobile-flip-hint:active:not(:disabled) {
  background: rgba(201, 169, 98, 0.35);
}

.mobile-flip-hint:disabled {
  opacity: 0.2;
  pointer-events: none;
}

body.viewport-narrow .mobile-flip-hint,
body.landscape-sim .mobile-flip-hint {
  display: flex;
}

@supports not (width: 1cqw) {
  body.layout-landscape .book {
    width: min(96vw, 1440px);
    height: min(calc(100dvh - 8rem), calc(min(96vw, 1440px) * 520 / 1440));
  }

  body.layout-portrait .portrait-card {
    width: min(96vw, 440px);
    height: calc(100dvh - 7.5rem);
    max-height: calc(100dvh - 7.5rem);
  }
}