/* =============================================================
   BOOK ENGINE — reader.css
   Shared look for every line-by-line picture book.
   A book only supplies book.js (its words and pictures); nothing in
   this file is specific to one book.

   Drawing rules learned the hard way (keep them):
   - No "opacity" on anything inside the pages: some graphics cards draw
     see-through layers in 3D pages in the wrong order. Fades use
     see-through colours (rgba) instead.
   - No shared 3D scene (no transform-style: preserve-3d): each page gets
     its own perspective in reader.js and z-index decides what is in front.
   ============================================================= */

/* -------------------------------------------------------------
   Sizes. The book always fits the window: wide screens get the
   landscape book, portrait screens get a tall page with the picture
   on top and the story lines underneath.
   ------------------------------------------------------------- */
:root {
  --vh: 100vh;                          /* window height */
  --top-gap: clamp(12px, 9vh, 80px);    /* space above the book */
  --below: calc(100px + 2vh);           /* page dots + control bar */

  /* Landscape book: 70% of the width, but never taller than the space left */
  --book-w: min(70vw, calc((var(--vh) - var(--top-gap) - var(--below)) * 1.75));
  --book-h: calc(var(--book-w) / 1.75);  /* 70 x 40 shape */

  /* 1% of the book's width, used to scale text with the book */
  --bw: calc(var(--book-w) / 70);

  /* set per book by reader.js from book.js */
  --book-font: 'Helvetica Neue', sans-serif;
  --text-scale: 0.9;
}

/* On phones 100vh includes the hidden address bar; dvh is the real visible height */
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

@media (max-height: 600px) {                       /* phones held sideways */
  :root { --below: calc(70px + 2vh); }
}

@media (pointer: coarse) {                         /* bigger touch buttons */
  :root { --below: calc(112px + 2vh); }
}

@media (pointer: coarse) and (max-height: 600px) {
  :root { --below: calc(80px + 2vh); }
}

/* -------------------------------------------------------------
   Page
   ------------------------------------------------------------- */
/* Pages behind the open one fan out past the screen edges: clip them */
html {
  overflow: hidden;
  overflow: clip;
}

body {
  margin: 0;
  /* the space above the book is padding inside the screen height
     (as a margin it would make the page taller than the screen) */
  padding-top: var(--top-gap);
  box-sizing: border-box;
  height: var(--vh);
  overflow: hidden;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: sans-serif;
  background-color: hsla(223deg 46% 41% / .2);
}

a {
  text-decoration: none;
}

/* -------------------------------------------------------------
   Book (carousel)
   ------------------------------------------------------------- */
#slider {
  position: relative;
  width: var(--book-w);
  height: var(--book-h);
  margin: 0 auto;
  font-family: var(--book-font);
}

/* One page. reader.js places each page around the open one
   (transform, z-index, shadow). */
#slider .page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;  /* story text sits at the bottom of the page */
  color: white;
  background: #fff;           /* seen only while the picture is loading */
  font-size: calc(1em + var(--text-scale) * var(--bw));
  font-weight: bold;
  word-spacing: 0.2em;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
  transition: transform 400ms ease;
}

#slider .page.far {           /* pages too far round the ring to show */
  visibility: hidden;
}

#slider .page.ending {
  background: black;
}

/* Credit for the ending video or picture (e.g. "Video by ZCH") */
#slider .page.ending .credit {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 2px 10px;
  font-size: max(11px, calc(0.9 * var(--bw)));
  font-weight: normal;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
}

/* Full-page picture behind the text */
.picture,
.page-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.picture {
  border-radius: 15px;
  z-index: -1;
}

.page-video {
  object-fit: cover;
  border-radius: 15px;
}

/* A picture file that is missing: show the page colour, not a broken icon */
.picture.missing {
  visibility: hidden;
}

/* -------------------------------------------------------------
   Line-by-line reader
   ------------------------------------------------------------- */
#slider p {
  margin: calc(1px + 1.2 * var(--bw));
  white-space: nowrap;        /* a line never wraps: reader.js fits the size */
}

#slider p:not(.read)        { color: rgba(255, 255, 255, 0.1); }   /* not read yet */
#slider p:not(.read) span   { color: rgba(0, 0, 0, 0.08); }

#slider p.read {
  color: black;
}

#slider p.current {
  background-color: white;
  border-radius: 5px;
}

#slider p.current::before { content: '❯ '; color: rgba(0, 0, 255, 0.9); }
#slider p.current::after  { content: ' ❮'; color: rgba(0, 0, 255, 0.9); }

/* While reader.js measures, every line gets its markers (the widest case) */
#slider.measuring p::before { content: '❯ '; }
#slider.measuring p::after  { content: ' ❮'; }

/* The size reader.js worked out for this screen */
#slider.fitted p {
  font-size: var(--line-size);
}

/* Invisible last line: reaching it turns to the ending page */
#slider p.end-line {
  visibility: hidden;
  margin: 0;
}

/* -------------------------------------------------------------
   Hard words: hover (or tap) shows the syllables in a bubble in the
   middle of the page; a linked word also opens its pronunciation
   ------------------------------------------------------------- */
#slider span {
  color: rgba(0, 0, 0, 0.8);
}

#slider span::before {
  content: attr(data-content);
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  font-size: 1.72em;
  white-space: nowrap;
  color: transparent;
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  pointer-events: none;
  transition: color 1s ease-out .2s, background-color 1s ease-out .2s,
              border-color 1s ease-out .2s;
}

#slider span[data-content=""]::before {
  display: none;
}

@media (hover: hover) {
  #slider p.read span:hover            { color: rgba(178, 34, 34, 0.8); }
  #slider p.read .pronunce span:hover  { color: rgba(0, 0, 255, 0.8); }
  #slider p.read span:hover::before {
    color: inherit;
    background-color: rgba(255, 192, 203, 0.8);
    border-color: rgba(255, 255, 255, 0.8);
  }
}

#slider p.read span.show-hint {               /* touch screens: tapped word */
  color: rgba(178, 34, 34, 0.8);
}

#slider p.read span.show-hint::before {
  color: inherit;
  background-color: rgba(255, 192, 203, 0.8);
  border-color: rgba(255, 255, 255, 0.8);
}

/* -------------------------------------------------------------
   Control bar (under the book, clear of every page)
   ------------------------------------------------------------- */
.controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: stretch;
  margin-top: calc(var(--book-h) * 0.02 + 16px);
}

/* Previous / next page buttons, either side of the line buttons */
#prev-page,
#next-page {
  padding: 4px 14px;
  font-size: 1em;
  font-weight: bolder;
  color: #3f48cc;
  background: white;
  border: 1px solid #b9bde8;
  border-radius: 5px;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

#next-line,
#prev-line {
  width: 150px;
  padding: 4px 0;
  font-size: 1em;
  font-weight: bolder;
  color: lightgrey;
  background: white;
  border-color: lightgrey;
  border-radius: 5px;
  cursor: pointer;
  touch-action: manipulation;
}

/* -------------------------------------------------------------
   Smaller / larger screens
   ------------------------------------------------------------- */
@media (max-width: 1125px) {
  #slider p {
    font-size: calc(0.5em + 0.7 * var(--bw));
    word-spacing: normal;
  }
}

@media (min-width: 2000px) {
  #next-page,
  #prev-page { padding: 0.3vw 0.9vw; font-size: 0.7vw; }
  #next-line,
  #prev-line {
    width: 8vw;
    font-size: 0.7vw;
    border-radius: 0.3vw;
  }
}

@media (max-width: 1000px) {
  #next-line,
  #prev-line {
    width: 110px;
    font-size: 0.75em;
  }
}

@media (max-height: 600px) {
  .controls { margin-top: calc(var(--book-h) * 0.02 + 10px); }
}

/* Narrow screens: the page buttons show just the arrow */
@media (max-width: 560px) {
  .controls { gap: 8px; }
  #prev-page .word,
  #next-page .word { display: none; }
  #prev-page, #next-page { padding: 4px 12px; }
  #next-line, #prev-line { width: 104px; }
}

@media (pointer: coarse) {
  #next-page,
  #prev-page { min-height: 44px; font-size: 1rem; }
  #next-line,
  #prev-line {
    min-height: 44px;
    width: 130px;
    font-size: 1rem;
  }
}

@media (pointer: coarse) and (max-height: 600px) {
  #next-line,
  #prev-line { min-height: 38px; }
}

/* -------------------------------------------------------------
   Portrait screens: tall page, picture on top, lines underneath
   ------------------------------------------------------------- */
@media (orientation: portrait) {
  :root {
    --top-gap: clamp(10px, 3vh, 40px);
    --book-w: min(94vw, 720px);
    --book-h: min(calc(var(--vh) - var(--top-gap) - var(--below)),
                  calc(var(--book-w) * 1.7));
  }

  #slider .page {
    background-color: #fffaf0;    /* paper colour behind the text */
    color: #333;
    font-size: clamp(15px, 4.3vw, 26px);
    word-spacing: normal;
    padding-bottom: 6px;
    box-sizing: border-box;
  }

  #slider .page.ending { background-color: black; }

  .picture {
    position: relative;
    order: -1;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
    margin-bottom: auto;
    z-index: auto;
  }

  #slider p {
    font-size: 1em;
    margin: 0.3em 0.6em;
    padding: 0.1em 0.3em;
  }

  #slider p:not(.read)      { color: rgba(51, 51, 51, 0.2); }
  #slider p:not(.read) span { color: rgba(0, 0, 0, 0.16); }

  #slider p.current {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  }
}

/* -------------------------------------------------------------
   "Turn your phone sideways" tip: a small banner on phones held
   upright. It never blocks the book and hides itself after 8 s.
   ------------------------------------------------------------- */
#rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 600px) {
  #rotate-hint {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 0 10px;
    pointer-events: none;
    font-family: var(--book-font);
  }

  body.hint-dismissed #rotate-hint {
    display: none;
  }
}

.rotate-card {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  width: min(100%, 380px);
  padding: 8px 10px;
  text-align: left;
  background: #fffaf0;
  border: 2px solid #3f48cc;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.rotate-phone {
  grid-row: 1 / 3;
  justify-self: center;
  position: relative;
  width: 20px;
  height: 34px;
  border: 3px solid #3f48cc;
  border-radius: 6px;
  animation: tip-sideways 2.6s ease-in-out infinite;
}

.rotate-phone::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #3f48cc;
}

@keyframes tip-sideways {
  0%, 20%   { transform: rotate(0deg); }
  50%, 80%  { transform: rotate(-90deg); }
  100%      { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-phone {
    animation: none;
    transform: rotate(-90deg);
  }
}

.rotate-title { font-size: 1rem; font-weight: bold; color: #3f48cc; }
.rotate-text  { grid-column: 2; font-size: 0.85rem; color: #333; }

#rotate-dismiss {
  grid-column: 3;
  grid-row: 1 / 3;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  color: white;
  background: #3f48cc;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
}

/* Message shown when book.js is missing or broken */
.book-error {
  max-width: 560px;
  margin: 40px auto;
  padding: 20px;
  font: 16px/1.5 sans-serif;
  background: white;
  border-left: 6px solid firebrick;
  border-radius: 8px;
}