.book {
  --leather: #6e3424;
  --leather-light: #8f4a33;
  --leather-dark: #46200f;
  --page: #f6ead0;
  --page-edge: #dcc69a;
  --fresh-ink: #8a5a34;
  display: grid;
  justify-items: center;
  gap: 20px;
  width: 100%;
}
.book__cover {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: var(--book-height, min(620px, calc(100dvh - 180px)));
  padding: 14px 16px 20px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(0, 0, 0, 0.05) 6px 8px),
    linear-gradient(180deg, var(--leather-light), var(--leather) 30%, var(--leather-dark));
  box-shadow:
    inset 0 0 0 3px var(--leather-light),
    inset 0 0 0 6px var(--leather-dark),
    0 6px 0 var(--ink),
    0 24px 44px rgba(0, 0, 0, 0.55);
}
.book__spread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100%;
  perspective: 1800px;
  box-shadow: 0 3px 0 var(--page-edge), 0 5px 0 #c4ab7d, 0 7px 0 var(--ink);
  border-radius: 4px;
}
.book__spread::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  background: rgba(58, 42, 30, 0.45);
  pointer-events: none;
}
.book[data-pages-per-view="1"] .book__spread { grid-template-columns: minmax(0, 1fr); }
.book[data-pages-per-view="1"] .book__spread::after { display: none; }

.book__page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 26px 30px;
  color: var(--ink);
  backface-visibility: hidden;
}
.book__page--left {
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, #efdfbf 0%, var(--page) 12%, var(--page) 84%, #dcc69a 100%);
  transform-origin: right center;
}
.book__page--right {
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #dcc69a 0%, var(--page) 16%, var(--page) 88%, #efdfbf 100%);
  transform-origin: left center;
}
.book[data-pages-per-view="1"] .book__page--left {
  border-radius: 4px;
  background: linear-gradient(90deg, #dcc69a 0%, var(--page) 7%, var(--page) 94%, #efdfbf 100%);
  transform-origin: left center;
}
.book__page-content {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: hidden auto;
}
.book__folio {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.book__folio:not(:empty)::before { content: "· "; }
.book__folio:not(:empty)::after { content: " ·"; }

.book__page.is-leaving-forward { animation: page-leaves-forward var(--book-page-turn-half) ease-in forwards; }
.book__page.is-arriving-forward { animation: page-arrives-forward var(--book-page-turn-half) ease-out; }
.book__page.is-leaving-backward { animation: page-leaves-backward var(--book-page-turn-half) ease-in forwards; }
.book__page.is-arriving-backward { animation: page-arrives-backward var(--book-page-turn-half) ease-out; }
.book[data-pages-per-view="1"] .book__page.is-arriving-forward { animation-name: page-arrives-backward; }
.book[data-pages-per-view="1"] .book__page.is-leaving-backward { animation-name: page-leaves-forward; }
@keyframes page-leaves-forward { to { transform: rotateY(-90deg); filter: brightness(0.8); } }
@keyframes page-arrives-forward { from { transform: rotateY(90deg); filter: brightness(0.8); } }
@keyframes page-leaves-backward { to { transform: rotateY(90deg); filter: brightness(0.8); } }
@keyframes page-arrives-backward { from { transform: rotateY(-90deg); filter: brightness(0.8); } }

.book__corner {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  background: var(--candle);
  box-shadow: inset 0 0 0 2px var(--ink), inset 4px 4px 0 2px #c8913a;
  clip-path: polygon(0 0, 100% 0, 100% 36%, 36% 36%, 36% 100%, 0 100%);
}
.book__corner--top-left { top: -3px; left: -3px; }
.book__corner--top-right { top: -3px; right: -3px; transform: scaleX(-1); }
.book__corner--bottom-left { bottom: -3px; left: -3px; transform: scaleY(-1); }
.book__corner--bottom-right { bottom: -3px; right: -3px; transform: scale(-1); }

.book__ribbon {
  position: absolute;
  z-index: 1;
  top: calc(100% - 18px);
  left: 24%;
  width: 12px;
  height: 34px;
  background: linear-gradient(90deg, var(--cherry) 0 66%, #93394c 66%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}

.book__quill {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(1px 2px 0 rgba(42, 29, 20, 0.35));
  transition: translate 90ms linear, opacity 200ms ease;
}
.book__quill .sprite { display: block; width: 100%; }
.book__quill.is-writing { opacity: 1; }

.book [data-ink-line] { border-radius: 4px; transition: background var(--book-ink-word-dries) ease, box-shadow var(--book-ink-word-dries) ease; }
.book [data-ink-line].is-writing { background: rgba(255, 233, 168, 0.85); box-shadow: 0 0 14px 4px rgba(255, 207, 107, 0.55); }
.book .ink-word {
  color: var(--fresh-ink);
  filter: blur(1.5px);
  transition: opacity var(--book-ink-word-dries) ease, filter var(--book-ink-word-dries) ease, color var(--book-ink-word-dries) ease;
}
.book .ink-word.is-inked { filter: none; }
.book [data-written] .ink-word { color: inherit; }
.book.is-complete .book__cover { animation: book-glows var(--book-completed-glow) ease-out; }
@keyframes book-glows {
  40% {
    box-shadow:
      inset 0 0 0 3px var(--leather-light),
      inset 0 0 0 6px var(--leather-dark),
      0 6px 0 var(--ink),
      0 0 60px 16px rgba(255, 207, 107, 0.65);
  }
}

.book__nav { display: flex; align-items: center; gap: 14px; color: var(--parchment); font-weight: 600; font-size: 0.95rem; }
.book__turn {
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--candle);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1;
  box-shadow: 0 3px 0 var(--ink);
}
.book__turn:disabled { opacity: 0.35; cursor: default; }

.book-overlay { display: grid; gap: 8px; }
.book-overlay__close { justify-self: end; }
.grimoire .book__cover { --book-height: min(660px, calc(100dvh - 170px)); }
.overlay[data-kind="grimoire"] .overlay__body { max-width: 1000px; }
.grimoire__title { display: grid; gap: 8px; justify-items: center; text-align: center; padding-block: 6px 10px; border-bottom: 2px dashed var(--page-edge); }
.grimoire__title h2 { margin: 0; font-family: var(--font-title); font-size: 1.45rem; color: var(--ink); }
.grimoire__title p { margin: 0; max-width: 36ch; }

.book .villager {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 4px 4px 8px;
  border-bottom: 1px dashed var(--page-edge);
  font-size: 0.88rem;
}
.book__entry.is-pointed .villager { background: rgba(255, 233, 168, 0.75); box-shadow: 0 0 0 4px rgba(255, 233, 168, 0.75); border-radius: 6px; }
.villager__portrait {
  width: 44px;
  height: auto;
  border: 2px solid var(--ink-soft);
  border-radius: 14px 14px 3px 3px;
  background: linear-gradient(180deg, #121530 0%, var(--night-light) 100%);
}
.villager__who { display: grid; gap: 1px; align-content: start; }
.villager__name { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.villager__name b { font-family: var(--font-title); font-weight: 500; font-size: 1.08rem; }
.villager__sign { font-family: var(--font-title); font-size: 0.85rem; color: var(--cherry); white-space: nowrap; }
.villager__meta { color: var(--ink-soft); line-height: 1.25; }
.villager__notes {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-hand);
  font-size: 1.22rem;
  line-height: 1.12;
}
.villager__note { padding-inline: 2px; }
.villager__keepsake {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  margin: 2px 0 0;
}
.villager__keepsake-sprite { grid-row: span 2; width: 24px; }
.villager__keepsake-name { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.2; }
.villager__keepsake-wish { font-style: italic; line-height: 1.45; }
.villager__keepsake .rune { border-bottom: 0; cursor: default; }
.villager__keepsake-giver { white-space: nowrap; }
.villager__giver-sign { display: inline-block; width: auto; height: 1.1em; margin-inline: 1px 3px; vertical-align: -0.1em; }
.villager__gift { grid-column: 1 / -1; margin: 2px 0 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.3; }

.served-word {
  padding-bottom: 0.12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M1.5 5.2 C 22 3.6, 46 7.2, 70 4.9 S 92 4.4, 98.5 5.6' fill='none' stroke='%234a4f63' stroke-opacity='0.85' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M6 7.4 C 30 6.2, 62 8.6, 95 6.9' fill='none' stroke='%234a4f63' stroke-opacity='0.45' stroke-width='1' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 100% / 0% 0.5em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.served-word.is-underlined { background-size: 100% 0.5em; }
.book .served-word { transition: background-size var(--book-underline-draws) ease-out; }

.book-notebook { display: grid; gap: 8px; }
.book-notebook :is(h3, h4) { margin: 0; font-family: var(--font-title); font-size: 1.1rem; color: var(--ink); }
.book-notebook__lines { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-family: var(--font-hand); font-size: 1.3rem; line-height: 1.15; }

.learned { display: grid; justify-items: center; }
.learned .book { animation: book-opens var(--return-book-opens) ease-out both; }
.learned .book__cover { --book-height: min(620px, calc(100dvh - 220px)); }
@keyframes book-opens {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
}

@media (max-width: 520px) {
  .book__cover { padding: 9px 10px 14px; }
  .book__page { padding: 16px 16px 26px; }
  .book__corner { width: 16px; height: 16px; }
  .grimoire .book__cover { --book-height: calc(100dvh - 150px); }
  .learned .book__cover { --book-height: calc(100dvh - 200px); }
}