@import url('/library/drinks.css');

/*
  Picture-book reader. The book itself is always cream paper with plum
  ink, in dark mode too, so the old illustrations sit on the pale ground
  they were drawn for. The book's tint is the cover and the frame.
*/
.reader {
  --paper-book: #fffaf3;
  --ink-book: #4a2545;
  max-width: 60rem;
}
.reader .lib-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.reader .crumb { margin: 0; }
.reader .drinks__cup { width: 2.2rem; }
.reader .drinks { min-height: 2.2rem; }
.reader .drinks__coaster { padding: 0.2rem 0.7rem; }

.sheet {
  position: relative;
  height: clamp(22rem, calc(100svh - 19rem), 42rem);
  padding: 0.75rem;
  border-radius: var(--radius);
  background: var(--tint);
  box-shadow: var(--shadow);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.sheet > * {
  height: 100%;
  background: var(--paper-book);
  color: var(--ink-book);
  border-radius: calc(var(--radius) - 0.5rem);
  overflow: hidden;
}
.sheet.from-right > * { animation: in-right 260ms ease-out; }
.sheet.from-left > * { animation: in-left 260ms ease-out; }
@keyframes in-right { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes in-left { from { opacity: 0; transform: translateX(-1.5rem); } }

/* A page: picture above the words on phones; side by side, words on the
   left as in the printed books, on wider screens. */
.page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}
.page__img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  order: -1;
}
.page__text {
  flex: none;
  max-height: 55%;
  overflow-y: auto;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.55;
}
.page__text p { margin: 0 0 0.6em; }
.page__text p:last-child { margin-bottom: 0; }
.page--words { justify-content: center; }
.page--words .page__text { max-height: none; max-width: 30rem; margin-inline: auto; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); }

/* Wide screens: sized so the read-aloud row stays on screen too (a
   landscape tablet is only about 800 px tall). Portrait tablets (taller
   than wide) keep the picture above the words, in a taller book. */
@media (min-width: 48rem) {
  .sheet { height: clamp(24rem, calc(100svh - 17.5rem), 40rem); }
}
@media (min-width: 40rem) and (max-aspect-ratio: 4/5) {
  .sheet { height: clamp(24rem, calc(100svh - 18rem), 60rem); }
  .page { padding: 1.5rem; gap: 1.25rem; }
}
@media (min-width: 48rem) and (min-aspect-ratio: 4/5) {
  .page--both {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
  }
  .page--both .page__text { flex: 1 1 0; min-width: 0; max-height: 100%; order: 0; }
  .page--both .page__img { order: 1; flex: 1.3 1 0; min-width: 0; width: auto; height: 100%; }
}

/* Cover and The End. */
.cover, .end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
}
.cover h1 { font-size: clamp(1.7rem, 1.2rem + 2.5vw, 2.8rem); color: var(--ink-book); max-width: 20ch; }
.cover img, .end img {
  flex: 1 1 0;
  min-height: 0;
  max-width: 100%;
  object-fit: contain;
  border-radius: 50% / 45%;
  border: 0.4rem solid var(--tint);
}
.cover__by { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); }
.cover__go { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.end__word { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); }
.end__note { margin: 0; font-size: var(--step--1); color: #7a5a76; max-width: 32rem; }

.reader a.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
}
.reader a.button.primary, .reader .sheet button.primary { background: var(--candyfloss); border-color: var(--candyfloss); color: #3a1636; }
.reader .sheet button:not(.primary) { background: var(--paper-book); color: var(--ink-book); border-color: #f3d6e6; }

/* Turning controls. */
.controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}
.turn {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  background: var(--tint);
  border-color: var(--tint);
  color: #3a1636;
}
.where { flex: 1; display: grid; gap: 0.35rem; justify-items: center; }
.count { font-family: var(--font-display); font-weight: 500; color: var(--ink-soft); }
.progress {
  width: 100%;
  max-width: 20rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--candyfloss-deep); transition: width 260ms; }

/* Read aloud. */
.page__text p, .cover h1, .end__word { border-radius: 0.5rem; transition: background-color 200ms; }
.speaking { background: color-mix(in srgb, var(--tint) 40%, transparent); box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--tint) 40%, transparent); }
.voice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}
.voice .play { display: flex; gap: 0.4rem; align-items: center; justify-content: center; min-width: 9.5rem; }
.voice .auto { white-space: nowrap; }

.speed { display: flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; }
.speed input { width: 7rem; accent-color: var(--candyfloss-deep); }
.rate { font-family: var(--font-display); font-size: var(--step--1); color: var(--ink-soft); min-width: 2.2rem; }
.voice .auto { font-size: var(--step--1); }
.voice[hidden], .narrators[hidden] { display: none; }
/* The two recorded narrators, as a pair of pills. */
.narrators { display: flex; }
.narrators .narrator { font-size: var(--step--1); white-space: nowrap; }
.narrators .narrator:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.narrators .narrator:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.narrators .narrator[aria-pressed='true'] { background: var(--tint); border-color: var(--tint); color: #3a1636; }
.voice .auto[aria-pressed='true'] { background: var(--tint); border-color: var(--tint); color: #3a1636; }
.voice .auto[aria-pressed='true']::before { content: '✓ '; }
/* Phones: the play button is a round icon so the row fits on one line. */
@media (max-width: 40rem) {
  .voice { gap: 0.5rem; }
  .voice .play { min-width: 0; width: 3.25rem; height: 3.25rem; padding: 0; font-size: 1.2rem; }
  .play__label, .rate, .narrator__more { display: none; }
  .speed { gap: 0.3rem; }
  .speed input { width: 5rem; }
  /* With the narrators there's a second row, the speed on its own. */
  .voice:has(.narrators:not([hidden])) .speed { order: 1; }
  .reader:has(.narrators:not([hidden])) .sheet { height: clamp(22rem, calc(100svh - 22rem), 42rem); }
}
/* Made books. */
.cover__blank {
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, 18rem);
  display: grid;
  place-items: center;
  border-radius: 50% / 45%;
  background: var(--tint);
  color: #fffaf3;
  font-size: 3rem;
}
.reader-note {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--lilac) 25%, var(--paper));
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--ink);
}
.reader .linkish { padding: 0; border: 0; background: none; color: var(--ink-soft); font-family: var(--font-display); font-size: var(--step--1); }

/* Fact books: the animal's name, then the words, then the fact panel. */
.cover__kind {
  margin: 0;
  padding: 0.15rem 0.8rem;
  border-radius: 999px;
  background: var(--tint);
  color: #3a1636;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
}
.page__title {
  margin: 0 0 0.3em;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--ink-book);
}
.page--facts .page__text { max-height: 68%; font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); }
.facts {
  display: grid;
  gap: 0.35rem;
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.8rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--tint) 30%, var(--paper-book));
  font-size: 0.9em;
  line-height: 1.4;
}
.facts > div { display: grid; grid-template-columns: 4.6rem 1fr; gap: 0.6rem; border-radius: 0.5rem; transition: background-color 200ms; }
.facts dt { font-family: var(--font-display); font-weight: 600; color: #a0286a; }
.facts dd { margin: 0; }
@media (min-width: 48rem) and (min-aspect-ratio: 4/5) {
  .page--facts.page--both { gap: 1.5rem; padding: 1.5rem; }
  .page--facts.page--both .page__img { flex: 1.1 1 0; }
  .page--facts.page--both .page__text { max-height: 100%; font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.1rem); }
}

/* I found it! */
.quiz {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  overflow-y: auto;
  position: relative;
}
.quiz__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; }
.quiz__title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--ink-book); }
.quiz__who { margin: 0; font-family: var(--font-display); color: #7a5a76; }
.quiz__who strong { color: var(--ink-book); font-size: 1.15em; }
.quiz__clues {
  margin: 0;
  padding: 0.5rem 0.8rem 0.5rem 2rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--tint) 30%, var(--paper-book));
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.45;
}
.quiz__clues li { border-radius: 0.4rem; }
.quiz__clues li.new { animation: clue-in 400ms ease-out; }
@keyframes clue-in { from { opacity: 0; transform: translateY(-0.3rem); } }
.quiz__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 48rem) { .quiz__grid { width: min(100%, 40rem); margin-inline: auto; } }
/* Wide and short (landscape tablets, laptops): all six in one row. */
@media (min-width: 48rem) and (min-aspect-ratio: 5/4) {
  .quiz__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
}
.reader .sheet .quiz__tile {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding: 0.3rem 0.3rem 0.4rem;
  border-radius: 1rem;
  border: 2px solid #f3d6e6;
  background: var(--paper-book);
  color: var(--ink-book);
  font-size: var(--step--1);
  line-height: 1.15;
  transition: transform 150ms, opacity 200ms;
}
.quiz__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 0.7rem; pointer-events: none; }
.reader .sheet .quiz__tile:not(:disabled):hover { transform: translateY(-2px) rotate(-1deg); border-color: var(--tint); }
.reader .sheet .quiz__tile:disabled { cursor: default; opacity: 1; }
.reader .sheet .quiz__tile.nope:disabled { opacity: 0.4; }
.quiz__tile.nope { animation: nope 400ms; }
.reader .sheet .quiz__tile.found { border-color: var(--candyfloss-deep); box-shadow: 0 0 0 0.25rem var(--candyfloss); transform: scale(1.06); animation: found 600ms; }
@keyframes nope { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes found { 40% { transform: scale(1.15) rotate(3deg); } }
.quiz__status { margin: 0; min-height: 1.4em; text-align: center; font-family: var(--font-display); color: #7a5a76; }
.quiz__found {
  display: none;
  position: absolute;
  inset: auto 1rem 1rem;
  padding: 0.8rem 1rem;
  border-radius: 1.2rem;
  background: var(--paper-book);
  box-shadow: 0 0.4rem 1.6rem rgb(74 37 69 / 0.25);
  border: 3px solid var(--tint);
  text-align: center;
}
.quiz__found.on { display: grid; gap: 0.3rem; justify-items: center; animation: pop 450ms cubic-bezier(.2, 1.6, .4, 1); }
.quiz__found p { margin: 0; font-size: var(--step-1); }
@keyframes pop { from { opacity: 0; transform: scale(0.7); } }
.quiz__yay {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem) !important;
  color: #a0286a;
}
.quiz__yay::before, .quiz__yay::after { content: '✦'; color: var(--shine); margin: 0 0.3em; display: inline-block; animation: twinkle 900ms infinite alternate; }
@keyframes twinkle { to { transform: scale(1.4) rotate(45deg); } }
.quiz__done { display: grid; gap: 0.6rem; justify-items: center; align-content: center; height: 100%; text-align: center; }
.quiz__done p { margin: 0; font-size: var(--step-1); }
.quiz__stars { color: var(--shine); font-size: 2.2rem !important; letter-spacing: 0.2em; text-shadow: 0 0 0.6rem rgb(242 182 50 / 0.6); }
@media (prefers-reduced-motion: reduce) {
  .quiz__clues li.new, .quiz__tile.nope, .reader .sheet .quiz__tile.found, .quiz__found.on, .quiz__yay::before, .quiz__yay::after { animation: none; }
}