/* Lore book — library backdrop (game shell) + open book image + two parchment pages. */

.lore-book-shell.quest-journal-shell {
  background: transparent;
  box-shadow: none;
}

.lore-book-shell .quest-journal__scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
}

.lore-book {
  --lore-text-body: calc(var(--gs-text-sm) * 0.8);
  --lore-text-page-title: calc(var(--gs-text-lg) * 1.2);
  --lore-text-chapter-title: calc(var(--gs-text-xl) * 1.8);
  --lore-drop-cap-size: calc(var(--gs-u-h) * 11);
  --lore-drop-cap-color: rgba(var(--gs-bronze-deep-rgb), 0.9);
  --lore-font-prose: "Eagle Lake", var(--game-font-body);
  width: 100%;
  display: flex;
  justify-content: center;
  font-family: var(--font-display, var(--game-font-display));
}

.lore-book__frame {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  filter: drop-shadow(0 calc(var(--gs-u-w) * 0.65) calc(var(--gs-u-h) * 1.8) rgba(0, 0, 0, 0.62));
}

/* Open book spread: two portrait pages (2:3 each) → 4:3 landscape. */
.lore-book__spread {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  container-name: lore-book-spread;
  width: auto;
  height: calc(var(--gs-u-h) * 85);
  max-height: none;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 4 / 3;
  gap: 0;
  --lore-book-page-pad-top: 5.5%;
  /* Match army spellbook page tabs: 8.2cqi per page → 4.1cqi on the full spread. */
  --lore-book-ribbon-w-tucked: 4.1cqi;
  --lore-book-ribbon-w-pulled: calc(var(--lore-book-ribbon-w-tucked) * 1.5);
  --lore-book-ribbon-h: calc(var(--lore-book-ribbon-w-tucked) * 0.861);
  --lore-book-ribbon-gap: calc(var(--lore-book-ribbon-h) * 0.5);
  --lore-book-ribbon-row-offset: calc(var(--lore-book-ribbon-h) + var(--lore-book-ribbon-gap));
  --lore-book-ribbon-origin-top: calc(var(--lore-book-page-pad-top) * 0.72 + var(--lore-book-ribbon-row-offset));
  --lore-book-ribbon-outset-min: calc(var(--gs-u-h) * 1.6);
  --lore-book-ribbon-outset-max: calc(var(--gs-u-h) * 0.1);
  --lore-book-ribbon-active-edge-nudge: var(--gs-u-w);
  --lore-book-ribbon-gold-line: rgba(var(--gs-gold-bright-rgb), 0.72);
  --lore-book-ribbon-gold-groove: rgba(72, 48, 18, 0.52);
  --lore-book-ribbon-clip-left: polygon(100% 0, 100% 100%, 0 100%, 16% 50%, 0 0);
  --lore-book-ribbon-clip-right: polygon(0 0, 0 100%, 100% 100%, 84% 50%, 100% 0);
  --lore-book-ribbon-extrude-left: drop-shadow(
    calc(var(--gs-u-h) * -0.14) calc(var(--gs-u-h) * 0.05) calc(var(--gs-u-h) * 0.2)
      rgba(0, 0, 0, 0.5)
  );
  --lore-book-ribbon-extrude-right: drop-shadow(
    calc(var(--gs-u-h) * 0.14) calc(var(--gs-u-h) * 0.05) calc(var(--gs-u-h) * 0.2)
      rgba(0, 0, 0, 0.5)
  );
  --lore-book-ribbon-fill: linear-gradient(
    180deg,
    #2e7a42 0%,
    #256a38 14%,
    #1c5630 34%,
    #123c20 50%,
    #1c5630 66%,
    #256a38 86%,
    #2e7a42 100%
  );
  --lore-book-ribbon-fill-active: linear-gradient(
    180deg,
    #369650 0%,
    #2c8444 14%,
    #227038 34%,
    #164828 50%,
    #227038 66%,
    #2c8444 86%,
    #369650 100%
  );
  --lore-book-ribbon-fill-off: linear-gradient(
    180deg,
    #4a6254 0%,
    #425a4c 14%,
    #384e42 34%,
    #2e4036 50%,
    #384e42 66%,
    #425a4c 86%,
    #4a6254 100%
  );
  --lore-book-ribbon-sheen-left:
    linear-gradient(
      180deg,
      transparent 12%,
      rgba(8, 28, 14, 0.12) 30%,
      rgba(6, 22, 10, 0.2) 50%,
      rgba(8, 28, 14, 0.12) 70%,
      transparent 88%
    ),
    linear-gradient(90deg, rgba(190, 255, 210, 0.1) 0%, transparent 28%);
  --lore-book-ribbon-sheen-right:
    linear-gradient(
      180deg,
      transparent 12%,
      rgba(8, 28, 14, 0.12) 30%,
      rgba(6, 22, 10, 0.2) 50%,
      rgba(8, 28, 14, 0.12) 70%,
      transparent 88%
    ),
    linear-gradient(270deg, rgba(190, 255, 210, 0.1) 0%, transparent 28%);
}

.lore-book__spread::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--lore-book-backdrop, url("/assets/img/city/backdrop-book.webp?v=536302468165"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
}

.lore-book__page {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  perspective: calc(var(--gs-u-h) * 180);
  transform-style: preserve-3d;
}

.lore-book__page--right {
  z-index: 2;
}

/* Turning leaf must paint over the opposite page (spine crossover). */
.lore-book__spread--flip-next .lore-book__page--right {
  z-index: 12;
}

.lore-book__spread--flip-prev .lore-book__page--left {
  z-index: 12;
}

.lore-book__spread--flip-next .lore-book__page--left {
  z-index: 1;
}

.lore-book__spread--flip-prev .lore-book__page--right {
  z-index: 1;
}

/* Chapter bookmarks — green ribbons; vertical slot fixed by global chapter index. */
.lore-book__chapter-ribbons {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 80%;
  bottom: auto;
  z-index: 4;
  pointer-events: none;
  /* Clip only vertically (80% band); ribbons bleed outward on the fore-edges. */
  overflow: visible;
  clip-path: inset(0 -100vmax 0 -100vmax);
  /* Natural stack metrics as % of this 80% band (matches prior spread-relative cqi sizing). */
  --lore-book-ribbon-h-natural-pct: 5.89%;
  --lore-book-ribbon-row-natural-pct: 8.82%;
  --lore-book-ribbon-origin-natural-pct: calc(6.875% * 0.72 + var(--lore-book-ribbon-row-natural-pct));
  --lore-book-ribbon-stack-natural-pct: calc(
    var(--lore-book-ribbon-origin-natural-pct) + (max(1, var(--lore-chapter-count, 1)) - 1) *
      var(--lore-book-ribbon-row-natural-pct) + var(--lore-book-ribbon-h-natural-pct)
  );
  --lore-book-ribbon-v-scale: min(1, calc(100% / var(--lore-book-ribbon-stack-natural-pct)));
  --lore-book-ribbon-h-scaled-pct: calc(var(--lore-book-ribbon-h-natural-pct) * var(--lore-book-ribbon-v-scale));
  --lore-book-ribbon-row-scaled-pct: calc(var(--lore-book-ribbon-row-natural-pct) * var(--lore-book-ribbon-v-scale));
  --lore-book-ribbon-origin-scaled-pct: calc(6.875% * 0.72 + var(--lore-book-ribbon-row-scaled-pct));
}

.lore-book__chapter-ribbon {
  position: absolute;
  top: calc(
    var(--lore-book-ribbon-origin-scaled-pct) + var(--lore-chapter-ribbon-index, 0) *
      var(--lore-book-ribbon-row-scaled-pct)
  );
  --lore-book-ribbon-inward-step: calc(
    (var(--lore-book-ribbon-outset-min) - var(--lore-book-ribbon-outset-max)) /
      var(--lore-book-ribbon-stack-max-index, 1)
  );
  --lore-book-ribbon-fore-shift: calc(
    var(--lore-book-ribbon-inward-step) * var(--lore-book-ribbon-stack-index, 0)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--lore-book-ribbon-w-tucked);
  height: var(--lore-book-ribbon-h-scaled-pct);
  min-height: var(--lore-book-ribbon-h-scaled-pct);
  padding: calc(var(--gs-u-h) * 0.08);
  border: none;
  box-shadow: none;
  isolation: isolate;
  z-index: calc(24 - var(--lore-chapter-ribbon-index, 0));
  pointer-events: auto;
  cursor: pointer;
  overflow: visible;
  transition:
    width 0.18s ease,
    transform 0.18s ease,
    filter 0.15s ease,
    background 0.15s ease;
}

.lore-book__chapter-ribbon:not(.lore-book__chapter-ribbon--off) {
  width: var(--lore-book-ribbon-w-pulled);
}

.lore-book__chapter-ribbon::before,
.lore-book__chapter-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lore-book__chapter-ribbon__icon {
  position: relative;
  z-index: 1;
  width: min(calc(var(--gs-u-w) * 4.58), 88%);
  height: min(calc(var(--gs-u-h) * 4.58), 72%);
  object-fit: contain;
  filter: drop-shadow(0 calc(var(--gs-u-w) * 0.05) calc(var(--gs-u-h) * 0.1) rgba(4, 8, 24, 0.55));
}

.lore-book__chapter-ribbon--fore-left {
  left: 0;
  background: var(--lore-book-ribbon-fill);
  clip-path: var(--lore-book-ribbon-clip-left);
  filter: var(--lore-book-ribbon-extrude-left);
}

.lore-book__chapter-ribbon--fore-left::before {
  clip-path: var(--lore-book-ribbon-clip-left);
  box-shadow:
    inset 0 var(--gs-hairline) 0 0 var(--lore-book-ribbon-gold-line),
    inset 0 calc(var(--gs-hairline) * -1) 0 0 var(--lore-book-ribbon-gold-line),
    inset var(--gs-stroke) 0 0 0 var(--lore-book-ribbon-gold-groove),
    inset calc(var(--gs-stroke) * 2) 0 0 0 var(--lore-book-ribbon-gold-line);
}

.lore-book__chapter-ribbon--fore-left::after {
  clip-path: var(--lore-book-ribbon-clip-left);
  opacity: 0.72;
  background: var(--lore-book-ribbon-sheen-left);
}

.lore-book__chapter-ribbon--fore-left:not(.lore-book__chapter-ribbon--off) {
  background: var(--lore-book-ribbon-fill-active);
  filter: var(--lore-book-ribbon-extrude-left);
  transform: translateX(var(--lore-book-ribbon-active-edge-nudge));
}

.lore-book__chapter-ribbon--fore-left.lore-book__chapter-ribbon--off {
  background: var(--lore-book-ribbon-fill-off);
  filter: grayscale(0.32) saturate(0.72) var(--lore-book-ribbon-extrude-left);
  transform: translateX(calc(var(--lore-book-ribbon-fore-shift) - var(--lore-book-ribbon-outset-min)));
}

.lore-book__chapter-ribbon--fore-left:not(.lore-book__chapter-ribbon--off):hover {
  filter: brightness(1.08) var(--lore-book-ribbon-extrude-left);
}

.lore-book__chapter-ribbon--fore-left.lore-book__chapter-ribbon--off:hover {
  filter: grayscale(0.22) saturate(0.85) brightness(1.04) var(--lore-book-ribbon-extrude-left);
}

.lore-book__chapter-ribbon--fore-right {
  right: 0;
  background: var(--lore-book-ribbon-fill);
  clip-path: var(--lore-book-ribbon-clip-right);
  filter: var(--lore-book-ribbon-extrude-right);
}

.lore-book__chapter-ribbon--fore-right::before {
  clip-path: var(--lore-book-ribbon-clip-right);
  box-shadow:
    inset 0 var(--gs-hairline) 0 0 var(--lore-book-ribbon-gold-line),
    inset 0 calc(var(--gs-hairline) * -1) 0 0 var(--lore-book-ribbon-gold-line),
    inset calc(var(--gs-stroke) * -1) 0 0 0 var(--lore-book-ribbon-gold-groove),
    inset calc(var(--gs-stroke) * -2) 0 0 0 var(--lore-book-ribbon-gold-line);
}

.lore-book__chapter-ribbon--fore-right::after {
  clip-path: var(--lore-book-ribbon-clip-right);
  opacity: 0.72;
  background: var(--lore-book-ribbon-sheen-right);
}

.lore-book__chapter-ribbon--fore-right:not(.lore-book__chapter-ribbon--off) {
  background: var(--lore-book-ribbon-fill-active);
  filter: var(--lore-book-ribbon-extrude-right);
  transform: translateX(calc(var(--lore-book-ribbon-active-edge-nudge) * 1.8));
}

.lore-book__chapter-ribbon--fore-right.lore-book__chapter-ribbon--off {
  background: var(--lore-book-ribbon-fill-off);
  filter: grayscale(0.32) saturate(0.72) var(--lore-book-ribbon-extrude-right);
  transform: translateX(calc(var(--lore-book-ribbon-outset-min) - var(--lore-book-ribbon-fore-shift)));
}

.lore-book__chapter-ribbon--fore-right:not(.lore-book__chapter-ribbon--off):hover {
  filter: brightness(1.08) var(--lore-book-ribbon-extrude-right);
}

.lore-book__chapter-ribbon--fore-right.lore-book__chapter-ribbon--off:hover {
  filter: grayscale(0.22) saturate(0.85) brightness(1.04) var(--lore-book-ribbon-extrude-right);
}

/* Parchment window — inset within the book-page frame, hugging the spine. */
.lore-book__flip {
  position: absolute;
  z-index: 1;
  width: 91%;
  height: 94.5%;
  top: calc((100% - 93%) / 2 - var(--gs-u-h));
  transform-style: preserve-3d;
  cursor: pointer;
}

.lore-book__page--left .lore-book__flip {
  right: 0;
  left: auto;
}

.lore-book__page--right .lore-book__flip {
  left: 0;
  right: auto;
}

.lore-book__flip--disabled {
  cursor: default;
  pointer-events: none;
}

.lore-book__flip-static,
.lore-book__flip-under,
.lore-book__flip-leaf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.lore-book__flip-under {
  z-index: 1;
}

.lore-book__flip-static {
  z-index: 2;
}

.lore-book__flip-leaf {
  z-index: 3;
  transition: transform 0.9s cubic-bezier(0.42, 0.02, 0.28, 1);
  pointer-events: none;
  will-change: transform;
  visibility: hidden;
}

.lore-book__flip-leaf--turning {
  z-index: 8;
  visibility: visible;
}

.lore-book__flip-leaf--right {
  transform-origin: left center;
}

.lore-book__flip-leaf--left {
  transform-origin: right center;
}

.lore-book__spread--flip-next .lore-book__flip-leaf--right {
  transform: translateZ(calc(var(--gs-u-h) * 0.45));
}

.lore-book__spread--flip-prev .lore-book__flip-leaf--left {
  transform: translateZ(calc(var(--gs-u-h) * 0.45));
}

.lore-book__flip-leaf--right.lore-book__flip-leaf--turning {
  transform: rotateY(-180deg) translateZ(calc(var(--gs-u-h) * 0.45));
}

.lore-book__flip-leaf--left.lore-book__flip-leaf--turning {
  transform: rotateY(180deg) translateZ(calc(var(--gs-u-h) * 0.45));
}

.lore-book__flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: inset 0 0 0 var(--gs-hairline) rgba(var(--gs-bronze-deep-rgb), 0.12);
}

.lore-book__page--left .lore-book__flip-face {
  border-radius: var(--gs-radius-xs) 0 0 var(--gs-radius-xs);
}

.lore-book__page--right .lore-book__flip-face {
  border-radius: 0 var(--gs-radius-xs) var(--gs-radius-xs) 0;
}

.lore-book__flip-face--back {
  transform: rotateY(180deg);
}

/* Parchment page content. */
.lore-parchment-page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  container-type: size;
  container-name: lore-page;
  background: var(--lore-parchment, url("/assets/img/packages/recruiting-parchment.webp?v=f146b57e4f48")) center / cover no-repeat;
  color: rgba(var(--gs-bronze-deep-rgb), 0.92);
  overflow: hidden;
  font-family: inherit;
}

.lore-book__page--left .lore-parchment-page {
  border-radius: var(--gs-radius-xs) 0 0 var(--gs-radius-xs);
}

.lore-book__page--right .lore-parchment-page {
  border-radius: 0 var(--gs-radius-xs) var(--gs-radius-xs) 0;
}

.lore-parchment-page__inset {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-block: 6cqh;
  padding-inline: 6cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lore-parchment-page__inset--endpaper {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: 8cqh;
}

.lore-parchment-page__endpaper-title {
  margin: 0;
  padding-block: 2.75cqh;
  font-size: var(--lore-text-chapter-title);
  line-height: 1.18;
  color: rgba(var(--gs-bronze-deep-rgb), 0.98);
  font-weight: 700;
}

.lore-parchment-page__endpaper-sub {
  margin: calc(var(--gs-u-h) * 0.35) 0 0;
  max-width: 88%;
  font-size: var(--lore-text-body);
  line-height: 1.4;
  color: rgba(var(--gs-bronze-deep-rgb), 0.82);
  font-style: italic;
}

.lore-parchment-page__head {
  flex: 0 0 auto;
  margin-bottom: calc(var(--gs-u-h) * 0.28);
  text-align: center;
}

.lore-parchment-page__title {
  margin: 0;
  margin-bottom: 3cqh;
  font-size: var(--lore-text-page-title);
  line-height: 1.22;
  color: rgba(var(--gs-bronze-deep-rgb), 0.98);
  font-weight: 700;
}

.lore-parchment-page__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--gs-u-h) * 0.32);
  width: 100%;
  overflow: hidden;
}

.lore-parchment-page__text {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.lore-parchment-page__body--text-only {
  gap: calc(var(--gs-u-h) * 0.22);
}

.lore-parchment-page__body--text-only .lore-parchment-page__text {
  flex: 1 1 auto;
}

.lore-parchment-page__figure {
  width: 72%;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 3cqh;
  flex-shrink: 0;
  align-self: center;
}

.lore-parchment-page__spacer {
  height: calc(var(--gs-u-h) * 0.55);
  margin: 0;
  flex-shrink: 0;
}

.lore-parchment-page__para {
  margin: 0 0 calc(var(--gs-u-h) * 0.32);
  font-family: var(--lore-font-prose);
  font-size: var(--lore-text-body);
  line-height: 1.5;
  text-indent: calc(var(--gs-u-h) * 0.65);
}

.lore-parchment-page__para:last-child {
  margin-bottom: 0;
}

.lore-parchment-page__text--drop-cap .lore-parchment-page__para:first-child {
  text-indent: 0;
}

.lore-parchment-page__text--drop-cap .lore-parchment-page__para:first-child::first-letter {
  float: left;
  margin: calc(var(--gs-u-h) * 0.04) calc(var(--gs-u-h) * 0.14) 0 0;
  font-size: var(--lore-drop-cap-size);
  line-height: 0.85;
  font-weight: 700;
  color: var(--lore-drop-cap-color);
}

.lore-parchment-page__illustration {
  display: block;
  width: 100%;
  margin-inline: auto;
  border-radius: var(--gs-radius-sm);
}

.lore-parchment-page__folio {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-xs);
  line-height: 1;
  color: rgba(var(--gs-bronze-deep-rgb), 0.68);
  font-variant-numeric: tabular-nums;
  width: 100%;
}

.lore-parchment-page__inset--outer-left .lore-parchment-page__folio {
  text-align: left;
}

.lore-parchment-page__inset--outer-right .lore-parchment-page__folio {
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .lore-book__flip-leaf {
    transition: none;
  }
}