/* The notebook: pages, page turning, journal, glyph groups, characters, stickers */

/* Notebook: page areas are percentages of the journal image (1066 x 720) */
.notebook {
  position: relative;
  /* leave room above the book for the Close button */
  width: min(100%, calc((100vh - 112px) * 1066 / 720));
  aspect-ratio: 1066 / 720;
}

.notebook-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The two pages have the same size, so content measured on one fits the other.
   Content is split into pages (see paginate), so a page doesn't scroll. */
.notebook-page {
  position: absolute;
  top: 6%;
  bottom: 11%; /* the strip below is kept for the page numbers and arrows */
  padding: 12px;
  overflow: hidden;
  color: var(--forest-darkest);
}

.notebook-page-left {
  left: 13%; /* clear of the tab stickers */
  right: 53%;
}

.notebook-page-right {
  left: 51%;
  right: 15%;
}

/* Invisible page used to measure what fits */
.notebook-measure {
  visibility: hidden;
  pointer-events: none;
}

/* Page numbers at the bottom of each page */
.page-number {
  position: absolute;
  top: 89%;
  font-size: 0.95rem;
  color: rgba(43, 33, 24, 0.55);
  transform: translateX(-50%);
}

.page-number-left { left: 30%; }
.page-number-right { left: 68%; }

/* ‹ › in the bottom corners of the pages */
/* The page arrows: a line arrow drawn in faded ink, darker on hover */
.page-turn {
  position: absolute;
  top: 88%;
  width: 64px;
  height: 36px;
  padding: 6px 0;
  color: rgba(43, 33, 24, 0.42);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.page-turn-prev { left: 12%; }
.page-turn-next { right: 14%; } /* the mirror of the back arrow: just past the right page's edge, as that one is past the left page's */

.page-turn svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-turn:hover,
.page-turn:focus-visible {
  color: rgba(43, 33, 24, 0.85);
  transform: scale(1.1);
  outline: none;
}

/* Glyphs and Language tabs: turning pages goes through what's on the left page (the glyph index,
   the confirmation drawings), so both arrows sit at the bottom of the left page */
#notebook[data-tab="glyphs"] .page-turn-prev,
#notebook[data-tab="language"] .page-turn-prev { left: 19%; }
#notebook[data-tab="glyphs"] .page-turn-next,
#notebook[data-tab="language"] .page-turn-next { left: 37%; right: auto; }

.page-turn-prev:hover { transform: scale(1.1) translateX(-4px); }
.page-turn-next:hover { transform: scale(1.1) translateX(4px); }

/* The turning page: a leaf hinged on the spine, covering the right page's paper.
   Lying on the right it shows its front; turned over onto the left it shows its back.
   Its content areas match the pages' content areas, so nothing jumps when it lands. */
.page-leaf {
  position: absolute;
  z-index: 5;
  left: 48.8%;
  width: 40.7%;
  top: 3.9%;
  height: 90.3%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transform: perspective(2200px) rotateY(0deg);
  transition: transform 0.75s ease-in-out;
  pointer-events: none;
}

.page-leaf.is-turned {
  transform: perspective(2200px) rotateY(-180deg);
}

.page-leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  color: var(--forest-darkest);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* Paper, darker towards the spine, matching the book's pages */
.page-leaf-front {
  background: linear-gradient(to right, #ddd5c4 0%, #f2ede4 7%, #f5f1e9 60%, #ece6da 100%);
  border-radius: 0 3px 3px 0;
}

.page-leaf-back {
  transform: rotateY(180deg);
  background: linear-gradient(to left, #ddd5c4 0%, #f2ede4 7%, #f8f4ec 60%, #f1ece2 100%);
  border-radius: 3px 0 0 3px;
}

.page-leaf-content {
  position: absolute;
  top: 2.3%;
  bottom: 5.7%; /* ends where the pages' content area ends (see .notebook-page), measured */
  width: 83.5%;
  padding: 12px;
  overflow: hidden;
}

.page-leaf-front .page-leaf-content { left: 5.4%; }
.page-leaf-back .page-leaf-content { left: 12%; }

/* Journal entries: handwritten */
.journal-entry {
  margin: 14px 0 0;
  font-family: var(--font-handwriting);
  font-size: 1.45rem;
  line-height: 1.25;
}

/* A space where the story moves to another scene */
.journal-entry.is-new-scene {
  margin-top: 40px;
}

/* ...except at the top of a page, where every first paragraph starts at the same height */
.notebook-page > .journal-entry:first-child,
.page-leaf-content > .journal-entry:first-child {
  margin-top: 14px;
}

/* Items: picture, name and description */
.item-text strong {
  display: block;
  font-size: 1.2rem;
}

.item-text p {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.3;
}

/* ---- Glyph groups ---- */
.group-page h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

/* A group right under the tab's title and instruction */
.group-intro + .group-page {
  margin-top: 8px;
}

/* The Language tab's instruction, under its title */
.group-intro {
  margin: 2px 0 0;
  font-style: italic;
  color: rgba(43, 33, 24, 0.7);
}

.group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

/* A confirmed meaning, written under its drawing and glyph (its space kept until then) */
.group-card .glyph-meaning {
  margin-top: 2px;
  font-size: 1.2rem;
  text-align: center;
}

.group-card .glyph-meaning.is-space {
  visibility: hidden;
}

/* Glyphs on the confirmation pages, as outside the notebook: the box to write a meaning
   floats under the glyph, over the page */
.notebook .group-page .glyph-with-meaning {
  color: var(--forest-darkest);
}

.notebook .group-page .glyph-with-meaning input.glyph-meaning {
  flex: none;
  z-index: 3;
  text-align: center;
  background: #f4ecd8;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* The cursor says what can be done: grab what can still be moved, the hand for a meaning to write,
   the plain arrow once confirmed (nothing to move or write any more) */
.notebook .group-page .glyph,
.notebook .group-page .name-cartouche {
  cursor: default;
}

.notebook .group-page .glyph-with-meaning:has(> input) .glyph {
  cursor: pointer;
}

.notebook .group-page [draggable="true"] {
  cursor: grab;
}

.notebook .group-page [draggable="true"]:active {
  cursor: grabbing;
}

/* The page with the drawings: the title at the top, the drawings in the middle of the space
   left under it. The page turning over lays it out the same way, so nothing jumps as it lands. */
.notebook-page:has(> .group-page.is-drawings),
.page-leaf-content:has(> .group-page.is-drawings) {
  display: flex;
  flex-direction: column;
}

.group-page.is-drawings {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 64px; /* room for the stamp, clear of the page arrows below */
}

.group-page.is-drawings > .group-grid {
  margin: auto 0;
}

.group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.group-picture {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.group-picture.placeholder {
  font-size: 0.85rem;
  text-align: center;
  color: var(--stone-light);
}

/* A slot under each drawing, to drop a glyph into */
.group-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1.5px dashed rgba(43, 33, 24, 0.45);
  border-radius: 50%;
}

.group-slot .glyph,
.group-palette .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  color: var(--forest-darkest);
  cursor: pointer;
}

.group-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.group-palette .glyph[draggable="true"] {
  cursor: grab;
}

.group-message {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-style: italic;
  color: #8a3b2a;
  text-align: center;
}

/* ---- Characters tab: each person met, their name cartouche, and what the player calls them ---- */
/* Two people per row, three rows per page, from the top */
.character-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 12px;
  margin-top: 14px;
}

/* A person: the portrait with their cartouche beside it, and the name they're given underneath */
.character-card {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
}

.character-card .character-name {
  grid-column: 1 / -1;
  justify-self: center;
}

/* The portrait, in an oval on a dark ground so the ghostly figure shows on the paper */
.character-card .spirit-portrait {
  align-self: center;
  width: 70px;
  height: 84px;
  border: 1.5px solid rgba(43, 33, 24, 0.55);
  border-radius: 50%;
  background: #2a3324;
  -webkit-mask-image: none;
  mask-image: none;
}

/* A cartouche slot: an upright rounded frame (dashed while empty) for the name to place there */
.group-slot.cartouche {
  position: relative;
  width: 52px;
  height: 70px;
  border-radius: 26px;
}

/* A name placed in it fills it: the name is drawn as a cartouche already */
.group-slot.cartouche .name-cartouche {
  width: 66px;
  height: 66px;
}

.group-slot.cartouche .glyph-image {
  object-fit: contain;
}

.group-slot.cartouche:has(.name-cartouche) {
  border-color: transparent;
}

/* Confirmed: a green frame around the name, like the Confirmed stamp */
.character-card.is-confirmed .group-slot.cartouche {
  outline: 2px solid #5c7a3a;
  outline-offset: 6px;
}

/* Just confirmed: the circle grows in from wider out, with a bright glow that settles */
.character-card.is-new .group-slot.cartouche {
  animation: name-confirm 1.1s ease-out;
}

@keyframes name-confirm {
  0% { outline-offset: 18px; outline-color: rgba(92, 122, 58, 0); box-shadow: 0 0 0 0 rgba(255, 226, 140, 0); }
  35% { outline-offset: 4px; outline-color: #7fa64f; box-shadow: 0 0 22px 10px rgba(255, 226, 140, 0.85); }
  100% { outline-offset: 6px; outline-color: #5c7a3a; box-shadow: 0 0 0 0 rgba(255, 226, 140, 0); }
}

/* Unconfirmed Cartouches: big, three per row (there are few names in all, so they fit on one page),
   each with the name the player gives it underneath */
.group-palette:has(.cartouche-cell) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 12px;
}

.cartouche-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.group-palette .cartouche-cell .name-cartouche {
  width: 84px;
  height: 84px;
}

/* The name being written: in place of the name, centred, no line */
.notebook .cartouche-cell .glyph-meaning {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: center;
  color: var(--forest-darkest);
  background: none;
  border: none;
  outline: none;
}

.cartouche-cell .index-meaning {
  text-align: center;
}

/* What the player calls them: their own handwriting, always theirs to change */
.character-name {
  width: 100%;
  max-width: 8em;
  margin-top: 10px;
  padding: 0 4px;
  font-family: var(--font-handwriting);
  font-size: 1.25rem;
  text-align: center;
  color: var(--forest-darkest);
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(43, 33, 24, 0.5);
}

.character-name:focus {
  outline: none;
  border-bottom-color: var(--forest-darkest);
}

/* Stamp on a confirmed group, in the page's bottom right corner (it takes no room from the drawings) */
.group-stamp {
  position: absolute;
  right: 4px;
  bottom: 30px;
  overflow: hidden; /* for its shine */
  margin: 0;
  padding: 2px 14px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5c7a3a;
  border: 2px solid #5c7a3a;
  border-radius: 4px;
  transform: rotate(-4deg);
}

/* Just confirmed: the stamp lands (a quick zoom down onto the page), then a shine runs across it */
.group-stamp.is-new {
  animation: stamp-land 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.group-stamp.is-new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 250, 225, 0.95) 50%, transparent 70%);
  transform: translateX(-130%);
  animation: stamp-shine 0.8s ease-out 0.45s forwards;
}

@keyframes stamp-land {
  0% { opacity: 0; transform: rotate(-4deg) scale(2.2); }
  60% { opacity: 1; transform: rotate(-4deg) scale(0.92); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@keyframes stamp-shine {
  to { transform: translateX(130%); }
}

/* (also on the page turning over, so the title doesn't shift as it lands) */
.notebook-page h2,
.page-leaf-content h2 {
  margin: 0;
  font-size: 1.8rem;
}

.notebook .glyph {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  color: var(--forest-darkest);
}

.notebook .glyph-meaning {
  flex: 1;
  min-width: 0;
  width: auto;
  text-align: left;
}

/* Tabs: coloured stickers stuck on the left page edge.
   Anchored on the right so they grow outwards, away from the page. */
.notebook-tabs {
  position: absolute;
  top: 10%;
  left: 0;
  width: 8%; /* from just outside the cover to the page edge, as if tucked between pages */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.notebook-tab {
  flex-shrink: 0;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--forest-darkest);
  border: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  /* hand-stuck look: a slight tilt, worn shading and a soft dark shadow */
  transform: rotate(var(--tilt, 0deg));
  background-image:
    linear-gradient(170deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(to right, transparent 70%, rgba(0, 0, 0, 0.12));
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45);
  transition: width 0.15s, height 0.15s, transform 0.15s;
}

/* Each sticker is a little different: colour, tilt, corners, size */
.notebook-tab[data-tab="journal"] {
  --tilt: -2.5deg;
  background-color: var(--sticker-1);
  border-radius: 2px 5px 3px 1px;
  height: 42px;
}

.notebook-tab[data-tab="glyphs"] {
  --tilt: 1.5deg;
  background-color: var(--sticker-2);
  border-radius: 4px 1px 2px 5px;
  height: 38px;
}

.notebook-tab[data-tab="language"] {
  --tilt: -1.5deg;
  background-color: var(--sticker-4);
  border-radius: 3px 2px 4px 1px;
  height: 40px;
}

.notebook-tab[data-tab="characters"] {
  --tilt: 2deg;
  background-color: var(--sticker-5);
  border-radius: 2px 4px 1px 3px;
  height: 39px;
}

.notebook-tab[data-tab="items"] {
  --tilt: 1deg;
  background-color: var(--sticker-3);
  border-radius: 1px 3px 6px 2px;
  height: 41px;
}

/* The open tab's sticker lines up with the others on the left
   and reaches further right, over the current page */
.notebook-tab.is-active {
  width: 150%;
  margin-right: -50%;
}

/* Name hidden until hovered */
.notebook-tab span {
  visibility: hidden;
}

.notebook-tab:hover,
.notebook-tab:focus-visible,
.notebook-tab.is-tip-target {
  width: calc(100% + 80px);
  height: 48px;
  transform: rotate(0deg);
  outline: none;
}

.notebook-tab.is-active:hover,
.notebook-tab.is-active:focus-visible {
  width: calc(150% + 80px);
}

.notebook-tab:hover span,
.notebook-tab:focus-visible span,
.notebook-tab.is-tip-target span {
  visibility: visible;
}

/* Just above the cover's top right corner (the picture's right edge is the strap, further out) */
.close-button {
  position: absolute;
  top: 0;
  right: 9%;
  transform: translateY(-40%);
  padding: 4px 12px;
  cursor: pointer;
}