.reader-toolbar { display: none; }

/* Opt-in spread reader: ordinary pages stay inside the available reading area. */
.reading-area.is-paged-reader {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  perspective: none;
  scroll-margin-top: 90px;
}
.is-paged-reader .reader-toolbar {
  position: sticky;
  top: 76px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  background: #0c160ef7;
}
.is-paged-reader .reader-title { min-width: 0; color: #e0c994; font: 600 1.2rem/1.2 var(--font-serif, Georgia, serif); overflow-wrap: anywhere; }
.is-paged-reader .reader-controls { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 8px; flex-shrink: 0; }
.is-paged-reader .reader-controls button {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #b49e7566;
  border-radius: 5px;
  background: #c6b38b10;
  color: #e0c994;
  font: 500 .8rem var(--font-sans, system-ui, sans-serif);
  cursor: pointer;
}
.is-paged-reader .reader-controls button:disabled { opacity: .35; cursor: default; }
.is-paged-reader .reader-controls button:focus-visible { outline: 2px solid #e0c994; outline-offset: 3px; }
.is-paged-reader .reader-counter { min-width: 64px; color: #d2c8b5; text-align: center; font: .8rem var(--font-sans, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.reading-area.is-paged-reader .scene { width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; padding: 18px; perspective: none; }
.reading-area.is-paged-reader .codex-book {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: auto;
  left: auto;
  top: auto;
  transform: none !important;
  transform-style: flat;
  transition: none;
  border: 5px solid #3c251b;
  border-radius: 7px 12px 12px 7px;
  background: #ded0ae;
  box-shadow: 0 5px 0 #b7a37d, 0 8px 0 #665338, 0 20px 35px #0007;
}
.reading-area.is-paged-reader [data-reader-face] {
  position: relative;
  display: block;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  min-height: clamp(480px, 70vh, 760px);
  margin: 0;
  padding: 24px 22px 45px;
  transform: none !important;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  border: 0;
  border-radius: 0;
  background: #e5d8b8;
  box-shadow: none;
  overflow: visible;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: #9b8464 #e5d8b8;
  cursor: auto;
  user-select: text;
  box-sizing: border-box;
}
.reading-area.is-paged-reader [data-reader-face][hidden] { display: none !important; }
.reading-area.is-paged-reader .is-reader-left { background-color: #ded0ae; box-shadow: inset -16px 0 25px -24px #5a4327; }
.reading-area.is-paged-reader .is-reader-right { box-shadow: inset 16px 0 25px -24px #5a4327; }
.is-paged-reader .page-title { font-size: 1.55rem; line-height: 1.2; }
.is-paged-reader .concept-text { text-align: left; }
.is-paged-reader .page-number { position: static; display: block; width: fit-content; margin: 1rem 0 0 auto; }
.reading-area.is-paged-reader.is-single-page .reader-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); }
.is-paged-reader.is-single-page .reader-controls { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.reading-area.is-paged-reader.is-single-page .scene { padding: 12px; }
.reading-area.is-paged-reader.is-single-page .codex-book { grid-template-columns: minmax(0, 1fr); }
.reading-area.is-paged-reader.is-single-page [data-reader-face] { height: auto; min-height: 280px; max-height: none; overflow: visible; padding: 22px 18px 28px; }

@media (max-width: 1023px) {
  .reading-area:not(.is-reader-open):not(.bestiary-reading) { display: none; }

  .reading-area.is-mobile-reader {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 0 10rem;
    overflow: visible;
    perspective: none;
    scroll-margin-top: 82px;
  }

  .is-mobile-reader .reader-toolbar {
    position: sticky;
    top: 68px;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    background: rgba(20, 14, 26, 0.97);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .reader-title {
    min-width: 0;
    align-self: center;
    overflow-wrap: anywhere;
    color: #f4e4a1;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.2;
  }

  .reader-controls {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .reader-controls button, .reader-close {
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid rgba(212, 175, 55, 0.32);
    border-radius: 8px;
    background: rgba(75, 0, 130, 0.2);
    color: #f4e4a1;
    font: 500 0.8rem var(--font-sans, system-ui, sans-serif);
    cursor: pointer;
  }

  .reader-controls button:disabled { opacity: 0.35; cursor: default; }
  .reader-controls button:focus-visible, .reader-close:focus-visible {
    outline: 2px solid #f4e4a1;
    outline-offset: 3px;
  }
  .reader-counter {
    min-width: 50px;
    color: #d2c8dd;
    text-align: center;
    font: 0.75rem var(--font-sans, system-ui, sans-serif);
    font-variant-numeric: tabular-nums;
  }

  .reading-area.is-mobile-reader .scene {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    perspective: none;
  }

  .is-mobile-reader .codex-book, .is-mobile-reader .book {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    transform: none !important;
    transform-style: flat;
    transition: none;
  }

  .is-mobile-reader [data-reader-sheet] {
    position: relative;
    display: none !important;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none !important;
    transform-style: flat;
    transition: none;
    cursor: default;
    user-select: text;
  }
  .is-mobile-reader [data-reader-sheet].is-reader-current { display: block !important; }

  .is-mobile-reader [data-reader-face] {
    position: relative;
    display: none !important;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 260px;
    margin: 0;
    padding: 20px 18px 24px;
    border-radius: 10px;
    transform: none !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    overflow: visible;
    overflow-wrap: anywhere;
    box-sizing: border-box;
  }
  .is-mobile-reader [data-reader-face].is-reader-current { display: block !important; }
  .is-mobile-reader .codex-cover, .is-mobile-reader .cover { display: none !important; }
  .is-mobile-reader .page-number { display: none; }
  .is-mobile-reader [data-reader-face] > h1 { margin-top: 1.5rem !important; font-size: 1.8rem !important; }
  .is-mobile-reader .page-title { font-size: 1.4rem; line-height: 1.2; }
  .is-mobile-reader .concept-text, .is-mobile-reader [data-reader-face] p, .is-mobile-reader [data-reader-face] li {
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
  }
  .is-mobile-reader .data-table { max-width: 100%; table-layout: fixed; }
  .is-mobile-reader .data-table th, .is-mobile-reader .data-table td { overflow-wrap: anywhere; }
  .is-mobile-reader img, .is-mobile-reader video, .is-mobile-reader iframe { max-width: 100%; }
}