:root{
  --table-1: #d8c9ad;
  --table-2: #b79f78;
  --paper: #fbf6ec;
  --ink: #2b2420;
  --accent: #c1573a;
  --accent-dark: #9c4028;
  --gold: #b8933f;
  --topbar-h: 56px;
  /* 07.10: the landing's design system (DECISIONS-1007 item 16): one set of tokens for the landing, the quiz and this reader. */
  --bg: #FFF8F2;
  --card: #FFFFFF;
  --ink-2: #6B5B53;
  --line: #EADFD5;
  --line-2: #D9C9BC;
  --soft: #F6E8DD;
  --cta: #FF5A36;
  --cta-hover: #E8482A;
  --ok: #2E8B57;
  --font-head: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{
  margin:0;
  height:100%;
  overflow:hidden;
  background:linear-gradient(180deg, var(--table-2), var(--table-1));
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color:var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#stage{
  position:fixed;
  inset:0;
  height:100dvh;
  width:100vw;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.15), transparent 60%),
    linear-gradient(180deg, var(--table-2), var(--table-1));
  overflow:hidden;
}

/* ---------- loading ---------- */
#loading{
  position:absolute; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:var(--table-2); color:#fff8ea;
  transition:opacity .4s ease, visibility .4s ease;
}
#loading[hidden]{opacity:0; visibility:hidden; display:flex; pointer-events:none;}
.spinner{
  width:40px;height:40px;border-radius:50%;
  border:4px solid rgba(255,255,255,.35); border-top-color:#fff8ea;
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- rotate hint ---------- */
#rotateHint{
  position:absolute; inset:0; z-index:60;
  background:rgba(20,16,12,.92); color:#fff8ea;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; padding:24px;
}
.rotate-icon{font-size:52px; animation:tilt 1.6s ease-in-out infinite;}
@keyframes tilt{0%,100%{transform:rotate(0deg);}50%{transform:rotate(90deg);}}
#rotateHintClose{
  margin-top:6px; padding:10px 18px; border-radius:999px; border:1px solid #fff8ea;
  background:transparent; color:#fff8ea; font-family:inherit; font-size:14px; cursor:pointer;
}

/* ---------- top bar ---------- */
#topbar{
  height:var(--topbar-h); flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; z-index:20;
  color:#fff8ea;
}
#progress{
  font-size:14px; letter-spacing:.5px; background:rgba(0,0,0,.28);
  padding:6px 12px; border-radius:999px;
}
#topActions{display:flex; gap:8px;}
.iconbtn{
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.28); color:#fff8ea; border:none; border-radius:999px;
  padding:8px 14px; font-family:inherit; font-size:13px; cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.iconbtn:active{transform:scale(0.94);}
.iconbtn .ic{font-size:15px; line-height:1;}
.iconbtn .lbl{font-weight:600;}

/* ---------- book area ---------- */
#bookWrap{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding: 8px 56px 24px;
}
#bookShadow{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  width:min(88%, 900px); height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.38), transparent 72%);
  filter:blur(2px);
  pointer-events:none;
}
#bookViewport{
  position:relative;
  width:100%; height:100%;
  max-width:1180px;
  display:flex; align-items:center; justify-content:center;
  perspective: 2400px;
}
#book{
  position:relative;
  background:transparent;
}

/* generic page look. NOTE: StPageFlip sets inline position/display styles
   directly on .page, so real layout must live on the .page-inner child
   instead of relying on flex/flow rules on .page itself. */
.page{
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 3px);
  box-shadow: inset 0 0 40px rgba(120,95,60,0.08);
  overflow:hidden;
  border-radius: 6px;
}
.page.page-cover{
  border-radius: 8px;
}
.page-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
}

.page-illustration{
  flex: 1 1 auto;
  min-height: 0;
  position:relative;
  overflow:hidden;
  background: var(--table-1);
}
/* Round-3 fix (art cropping): the illustration is shown twice —
   a blurred, scaled-up "cover" copy fills the box edge-to-edge as a backdrop
   (so there is never a bare/mismatched letterbox color), and a sharp
   "contain" copy sits on top and is ALWAYS scaled to show the full image,
   so a character's head/body can never be cropped by the box's aspect
   ratio, whatever height the caption band below ends up needing. */
.page-illustration-bg{
  position:absolute; inset:-8%;
  width:116%; height:116%;
  object-fit:cover;
  filter: blur(24px) saturate(1.05) brightness(0.92);
  transform: translateZ(0);
  display:block;
  -webkit-user-drag:none; user-select:none;
}
.page-illustration-fg{
  /* No z-index: it must stack above -bg by DOM order alone (both are
     z-index:auto), so a later sibling like .cover-caption still paints
     above it. An explicit z-index here previously outranked the
     z-index:auto .cover-caption overlay and hid it completely. */
  position:relative;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none; user-select:none;
}
.page-illustration::after{
  content:"";
  position:absolute; inset:0;
  box-shadow: inset 0 0 24px rgba(0,0,0,0.10);
  pointer-events:none;
}

/* Round-3 fix (art cropping): the caption band is capped at a fraction of
   the page height so a long real-story page (~50-65 words) can never grow
   large enough to squeeze the illustration down to nothing; viewer.js then
   auto-fits the font size (down to a min-readable floor) INSIDE that cap so
   the full text stays visible without overflow/clipping. Short book.json
   text never hits the cap or the floor, so its look is unchanged. */
.page-text{
  flex: 0 0 auto;
  max-height: 36%;
  overflow:hidden;
  padding: 18px 22px 14px;
  font-size: clamp(15px, 2.6vw, 20px);
  line-height:1.5;
  color: var(--ink);
  text-align:left;
  background: var(--paper);
}

.page-number{
  position:absolute; bottom:8px; z-index:2; font-size:11px; color:#8a7a63; letter-spacing:.5px;
}
/* Real (?manifest) books have long text: reserve the strip where .page-number
   sits so the last line never runs under it. book.json keeps its old look. */
.manifest-mode .page-text{padding-bottom:28px;}
.page-number.left{left:16px;}
.page-number.right{right:16px;}

.end-caption{
  position:absolute;
  bottom:10%;
  left:0;
  right:0;
  text-align:center;
  font-size:26px;
  font-weight:700;
  color:#fff8ea;
  background:transparent;
  padding:0;
}

/* ---------- manifest-only page kinds (no book.json equivalent) ---------- */
/* No dedicated art (dedication page, synthetic "The End" back cover):
   give the illustration area a legible dark backdrop instead of bare paper,
   since end-caption/cover text on these is light-colored. */
.page-noimage .page-illustration{
  background: linear-gradient(160deg, var(--accent-dark), #241d18 85%);
}

.page-dedication{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 14% 10%;
  text-align:center;
  background: var(--paper);
}
.page-dedication-text{
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(16px, 2.8vw, 24px);
  line-height:1.6;
  color: var(--ink);
  white-space: pre-line;   /* 10.10 S1: the typed lines stay lines */
}
.page-dedication-sign{
  margin-top: 0.9em;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(16px, 2.8vw, 24px);
  line-height:1.5;
  color: var(--ink);
}

.cover-caption{
  position:absolute; left:6%; right:6%; bottom:10%;
  background: rgba(20,16,26,0.55);
  border-radius:14px;
  padding: 5% 6%;
  text-align:center;
}
.cover-caption-text{
  color:#fff8ea;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight:700;
  font-size: clamp(15px, 3.2vw, 24px);
  line-height:1.3;
}
/* Round-3 fix (cover fallback): shown under the title when the manifest has
   no cover.text but does have a child name, so the fallback cover still
   reads as "this child's book", not a generic title alone. */
.cover-caption-subtext{
  color:#fff8ea;
  opacity:.82;
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-weight:500;
  font-style:italic;
  font-size: clamp(12px, 2.2vw, 16px);
  line-height:1.3;
  margin-top:6px;
}

/* spine shadow for desktop spread, applied via JS on center */
.spine-shadow{
  position:absolute; top:0; bottom:0; left:50%; width:36px; transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.18));
  pointer-events:none; z-index:5;
}

/* ---------- nav buttons ---------- */
.navbtn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(0,0,0,.32); color:#fff8ea; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  z-index:15; transition:background .15s ease, opacity .15s ease;
}
.navbtn:active{transform:translateY(-50%) scale(.92);}
.navbtn[disabled]{opacity:.25; pointer-events:none;}
.navbtn-prev{left:8px;}
.navbtn-next{right:8px;}

/* ---------- end screen ---------- */
.overlay-screen{
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,14,10,.55);
  backdrop-filter: blur(3px);
  padding:20px;
}
.end-card{
  background: var(--paper);
  border-radius:16px;
  padding:32px 28px;
  max-width:420px; width:100%;
  text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.end-title{
  font-size:34px; font-weight:700; color:var(--accent-dark); margin-bottom:8px;
  font-family: Georgia, serif;
}
.end-sub{color:var(--ink-2); margin:0 0 20px;}
.end-actions{display:flex; flex-direction:column; gap:10px;}
.btn{
  font-family:inherit; font-size:15px; font-weight:600; padding:12px 18px;
  border-radius:999px; border:none; cursor:pointer; transition:transform .1s ease, opacity .15s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent); color:#fff8ea;}
.btn-secondary{background:transparent; color:var(--accent-dark); border:1.5px solid var(--accent-dark);}
.end-upsell{margin-top:18px;}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  #bookWrap{padding: 4px 4px 10px;}
  .navbtn{width:40px; height:40px; font-size:20px;}
  .navbtn-prev{left:2px;}
  .navbtn-next{right:2px;}
  .page-text{padding:14px 16px 12px;}
  .manifest-mode .page-text{padding-bottom:26px;}
  #topbar{padding:0 10px;}
  .iconbtn .lbl{display:none;}
  .iconbtn{padding:9px 11px;}
}

@media (prefers-reduced-motion: reduce){
  .rotate-icon{animation:none;}
}

/* --- landing embed override (this copy only; original viewer/ untouched) ---
   Disable the "rotate phone" hint: this widget is embedded in a fixed
   phone-shaped preview frame on the landing page, so the hint's narrow-
   portrait-viewport check fires incorrectly even on desktop. */
#rotateHint{ display:none !important; }

/* Reading desk: keep the artwork intact, paper quiet, and controls off the page. */
:root { --paper:#FFFFFF; --ink:#2B2118; --accent:#C93A1C; --accent-dark:#9E2D15; --topbar-h:64px; }   /* --accent: small filled controls (white text 5:1); --cta is for the one big button */
html, body, #stage { background:var(--bg); }
body, button, a { font-family:var(--font-body); }
#stage { width:100%; }
#topbar { gap:16px; padding:8px 24px; color:var(--ink); border-bottom:1px solid var(--line); }
#bookTitle { margin:0; min-width:0; font:600 17px/1.25 var(--font-head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#topActions { flex-shrink:0; gap:6px; }
.iconbtn { min-height:44px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--card); color:var(--ink); font:700 15px/1.2 var(--font-body); padding:8px 14px; }
button:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
#bookWrap { padding:18px 24px 12px; }
#bookShadow { opacity:.36; }
.page { border-radius:2px; background-image:none; box-shadow:inset 0 0 24px #6150430b; }
.page.page-cover { border-radius:3px; }
.page-illustration { background:var(--paper); }
.page-illustration-bg { display:none; }
.page-illustration::after { box-shadow:none; }
.page-text { padding:18px 24px 28px; font-size:clamp(16px,2.2vw,21px); line-height:1.55; text-wrap:pretty; overflow-wrap:anywhere; overflow:auto; }
.page-number { color:var(--ink-2); bottom:8px; }
.cover-caption { bottom:5%; border-radius:3px; background:#2b2118e8; }
.page-noimage .page-illustration { background:#4a352b; }
#readingControls { display:flex; align-items:center; justify-content:center; gap:22px; flex:0 0 auto; min-height:64px; padding:8px 16px max(10px, env(safe-area-inset-bottom)); }
#progress { min-width:96px; padding:0; border-radius:0; background:none; color:var(--ink-2); text-align:center; font:700 15px/1.3 var(--font-body); letter-spacing:0; }
.navbtn { position:static; transform:none; width:auto; min-width:100px; height:48px; gap:8px; border:1.5px solid var(--line-2); border-radius:12px; background:var(--card); color:var(--ink); font:700 16px/1 var(--font-body); padding:0 14px; }
.navbtn:active { transform:none; }
.navbtn[disabled] { opacity:.4; }
#loading { background:var(--bg); color:var(--ink); padding:24px; text-align:center; }
#loading .load-error-title { margin:0 0 .4em; }
#loading .load-error-link { color:var(--accent); font-weight:600; text-underline-offset:3px; }   /* 07.10: the way back from the error state, in the site's accent */
.spinner { border-color:var(--line-2); border-top-color:var(--cta); }
#textReader { width:min(640px,calc(100% - 28px)); max-height:85dvh; padding:24px 28px; border:1px solid var(--line-2); border-radius:16px; color:var(--ink); background:var(--paper); }
#textReader::backdrop { background:#2b211899; }
.reader-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.reader-heading h2 { margin:0; font:600 24px/1.3 var(--font-head); }
#storyText { font:19px/1.75 Georgia,serif; overflow-wrap:anywhere; }
#storyText p { margin:1.25em 0; }
@media (max-width:760px) {
  #topbar { padding:8px 12px; gap:8px; }
  #bookTitle { font-size:13px; }
  #bookWrap { padding:10px 12px 6px; }
  #readingControls { gap:12px; }
  .navbtn { min-width:82px; height:44px; font-size:13px; }
  .page-text { padding:14px 18px 26px; }
  .iconbtn { padding:8px 10px; }
}
@media (max-height:400px) {
  :root { --topbar-h:44px; }
  #topbar { padding:3px 10px; }
  .iconbtn { min-height:34px; }
  #bookWrap { padding:4px 12px; }
  #readingControls { min-height:42px; padding:3px 10px; }
  .navbtn { height:34px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* Short 16:9 previews must contain the page's text as well as its outer box.
   Scale the print layout with the miniature page; fullscreen remains readable. */
@media (max-height: 350px) {
  .page-text {
    font-size: calc(20px * var(--page-scale, 1));
    padding: calc(18px * var(--page-scale, 1)) calc(22px * var(--page-scale, 1)) calc(14px * var(--page-scale, 1));
  }
  .manifest-mode .page-text { padding-bottom: calc(28px * var(--page-scale, 1)); }
  .page-number { font-size: calc(11px * var(--page-scale, 1)); bottom: calc(8px * var(--page-scale, 1)); }
  .end-caption { font-size: calc(26px * var(--page-scale, 1)); padding: 0; }
  .page-dedication-text, .page-dedication-sign { font-size: calc(24px * var(--page-scale, 1)); }
  .cover-caption-text { font-size: calc(24px * var(--page-scale, 1)); }
  .cover-caption-subtext { font-size: calc(16px * var(--page-scale, 1)); }
}

/* ---------- v2 preview: a locked page (fallback markup, 06.10). The picture is the server's blurred copy: no filter here. ---------- */
.page-locked{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;
  padding: 0 10% 12%;
  text-align:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(253,112,58,.18), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(90,63,143,.16), transparent 55%),
    var(--paper);
}
.page-locked-img{ position:absolute; top:0; left:0; width:100%; height:78%; object-fit:cover; }
.page-locked:not(.has-image){ justify-content:center; padding: 12% 10%; }
.page-locked-icon{ position:relative; font-size: clamp(22px, 4vw, 30px); line-height:1; }
.page-locked:not(.has-image) .page-locked-icon{ font-size: clamp(28px, 6vw, 44px); }
.page-locked-text{ position:relative; font-size: clamp(13px, 2.2vw, 17px); line-height:1.5; color: var(--ink); opacity:.8; max-width: 26ch; }

/* ---------- 05.10 phone fixes (all inside max-width:760 / .is-single / .cover-band: desktop is untouched) ---------- */
@media (max-width: 760px) {
  /* Long titles wrap (up to three lines, then an ellipsis) instead of being cut after a few letters. */
  #topbar { align-items: center; }
  #bookTitle { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.2; overflow-wrap: anywhere; }
}
@media (max-width: 430px) {
  /* Tighter buttons so the title keeps a few words per line;  */
  #topActions { gap: 4px; }
  .iconbtn { padding: 8px 9px; gap: 4px; }
}
/* Real books on a phone: the art area has the same height on every page; the text lives in a band of fixed height
   (viewer.js shrinks the font to fit it). */
/* The band height is one value for the whole book (viewer.js sets --text-band; 36% until it has measured). The page
   number sits in its own strip under the text, never over it. */
.manifest-mode #book.is-single .page-text { flex: 0 0 var(--text-band, 36%); max-height: none; padding-bottom: 6px; }
.manifest-mode #book .page-text.is-clipped { box-shadow: inset 0 -14px 10px -10px rgba(48, 43, 53, 0.5); }
.manifest-mode #book.is-single .page-number { position: static; flex: 0 0 22px; padding: 0 16px; line-height: 22px; bottom: auto; }
.manifest-mode #book.is-single .page-number.left { text-align: left; }
.manifest-mode #book.is-single .page-number.right { text-align: right; }
.manifest-mode #book.is-single .page-illustration { flex: 1 1 0; }
/* Phone cover with the title in a band under the portrait art instead of over it. */
.cover-band .cover-caption { position: static; flex: 0 0 auto; margin: 0; padding: 12px 18px 16px; border-radius: 0; background: var(--paper); text-align: center; }
.cover-band .cover-caption-text { color: var(--ink); font-size: clamp(18px, 5.4vw, 26px); line-height: 1.25; overflow-wrap: anywhere; }
.cover-band .cover-caption-subtext { color: var(--ink-2); opacity: 1; font-size: clamp(13px, 3.6vw, 16px); margin-top: 4px; }

/* Short embeds (the quiz preview iframe on a small phone is ~520px high): less chrome, more book. */
@media (max-width: 760px) and (max-height: 560px) {
  :root { --topbar-h: 48px; }
  #topbar { padding: 4px 12px; }
  #bookTitle { -webkit-line-clamp: 2; line-clamp: 2; }
  .iconbtn { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  #bookWrap { padding: 4px 12px 2px; }
  #readingControls { min-height: 48px; padding: 4px 12px 6px; }
  .navbtn { height: 40px; }
}

/* ---------- 05.10 phone art + desktop spreads: ONE caption band per book (viewer.js sets --text-band) ---------- */
/* Desktop spreads of a real book: every page has the same caption height, so the art is the same height on every
   spread. The page number stays where it was (absolute, in the band's bottom padding). Landing book.json: untouched. */
.manifest-mode #book:not(.is-single) .page-text:not(.end-caption) { flex: 0 0 var(--text-band, 36%); max-height: none; }
.manifest-mode #book:not(.is-single) .page-illustration { flex: 1 1 0; }

/* ---------- 05.10 delivered book only: reading options row (auto-play, speed, dark mode) ---------- */
#readerTools { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; padding: 0 16px max(10px, env(safe-area-inset-bottom)); }
#stage.has-tools #readingControls { min-height: 54px; padding-bottom: 4px; }
/* A short portrait embed (the order page's iframe is ~380-520px high) keeps all its height for the book: no options row
   there, they are in the full-screen viewer one tap away ("Open the book full screen"). */
@media (max-width: 760px) and (max-height: 599px) and (orientation: portrait) {
  #stage.has-tools #readerTools { display: none; }
  #stage.has-tools #readingControls { min-height: 64px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
.toolbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 6px 12px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--card); color: var(--ink); font: 700 14px/1.2 var(--font-body); cursor: pointer; }
.toolbtn .ic { font-size: 14px; line-height: 1; }
.toolbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
#btnSpeed { min-width: 52px; font-variant-numeric: tabular-nums; }
/* Short landscape phone: the options sit at the right end of the page-turn row instead of taking a row of their own. */
@media (max-height: 400px) {
  #stage.has-tools #readerTools { position: absolute; right: 10px; bottom: 3px; padding: 0; gap: 6px; }
  #stage.has-tools #readingControls { min-height: 42px; padding-bottom: 3px; }
  .toolbtn { min-height: 34px; padding: 4px 9px; }
  .toolbtn { min-width: 40px; }
  .toolbtn:not(#btnSpeed) .lbl { display: none; } /* icons only: the row must not run under the Next button */
  .toolbtn .ic { font-size: 16px; }
}

/* ---------- 05.10 dark mode: ONLY a delivered book viewer (viewer.js sets data-theme, nothing else ever does) ---------- */
html[data-theme="dark"] { --paper: #261E19; --ink: #F4EAE0; --ink-2: #CDBEB3; --accent: #7a5cb0; --accent-dark: #FFB59E; --bg: #1A1411; --card: #261E19; --line: #3D322B; --line-2: #5A4A40; --soft: #33291F; color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] #stage { background: var(--bg); }
html[data-theme="dark"] #topbar { border-bottom-color: var(--line); }
html[data-theme="dark"] .iconbtn, html[data-theme="dark"] .toolbtn { border-color: var(--line-2); color: var(--ink); background: var(--card); }
html[data-theme="dark"] .toolbtn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="dark"] #progress { color: var(--ink-2); }
html[data-theme="dark"] .navbtn { background: var(--card); border-color: var(--line-2); color: var(--ink); }
html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible { outline-color: #FFB59E; }
html[data-theme="dark"] #loading { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .spinner { border-color: var(--line-2); border-top-color: var(--cta); }
html[data-theme="dark"] .page { box-shadow: inset 0 0 24px #0000003a; }
html[data-theme="dark"] .page-number { color: #B3A397; }
html[data-theme="dark"] .page-text.is-clipped { box-shadow: inset 0 -14px 10px -10px rgba(0, 0, 0, 0.8); }
html[data-theme="dark"] .cover-band .cover-caption-subtext, html[data-theme="dark"] .end-sub { color: var(--ink-2); }
html[data-theme="dark"] #textReader { border-color: var(--line-2); background: var(--paper); color: var(--ink); }
html[data-theme="dark"] #textReader::backdrop { background: #000000b3; }
html[data-theme="dark"] .end-card { background: var(--paper); }
html[data-theme="dark"] .btn-primary { background: var(--accent); color: #fff; }
html[data-theme="dark"] .btn-secondary { color: var(--accent-dark); border-color: var(--accent-dark); }

/* Phone cover with portrait art: the art keeps its own shape and the art + title block sits in the middle of the page
   (the taller phone page used to leave a strip of bare paper above and below a width-limited picture). */
.manifest-mode .cover-band .page-inner { justify-content: center; }
.manifest-mode .cover-band .page-illustration { flex: 0 1 auto; min-height: 0; }
.manifest-mode .cover-band .page-illustration-fg { height: auto; max-height: 100%; }
/* Phone: the two control rows are kept tight so the book keeps the height (390x844: art 339x464, was 259x355). */
@media (max-width: 760px) and (min-height: 600px) {
  #stage.has-tools #readingControls { min-height: 48px; padding: 2px 12px 2px; }
  #readerTools { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .toolbtn { min-height: 38px; }
}

/* ---------- 07.10 (audit 9, V track): Back, end card, whole pictures, hover only where a pointer hovers ---------- */
/* Back: the sample book opened as the whole page (viewer.js shows it). Arrow + word: the word is for readers who do not know the arrow. */
.backbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px 8px 10px; border: 1.5px solid var(--line-2); border-radius: 12px;
  background: var(--card); color: var(--ink); font: 700 15px/1.2 var(--font-body); text-decoration: none; cursor: pointer; }
.backbtn .ic { font-size: 18px; line-height: 1; }
#topbar { justify-content: flex-start; }
#bookTitle { flex: 1 1 auto; }
@media (max-width: 760px) { .backbtn { padding: 8px 10px 8px 8px; gap: 4px; } }
@media (max-width: 430px) { .backbtn .lbl { display: inline; } }

/* End card of the sample book: a bright rounded card, the one big button in the CTA colour (white 19px bold text on it is "large text", 3.3:1). */
.overlay-screen { background: rgba(43, 33, 24, .62); backdrop-filter: none; overflow-y: auto; }
.end-card { position: relative; max-width: 440px; margin: auto; padding: 30px 24px 22px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(43, 33, 24, .4); }
.end-title { margin: 0 0 10px; font: 600 28px/1.2 var(--font-head); color: var(--ink); }
.end-sub { margin: 0 0 20px; font: 400 18px/1.45 var(--font-body); color: var(--ink-2); }
.end-actions { gap: 12px; align-items: stretch; }
.btn { min-height: 56px; padding: 12px 20px; border-radius: 16px; font: 700 18px/1.2 var(--font-body); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.btn-cta { background: var(--cta); color: #fff; font: 700 19px/1.2 var(--font-head); box-shadow: 0 6px 18px rgba(255, 90, 54, .32); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--card); color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-quiet { background: transparent; color: var(--ink-2); border: 0; text-decoration: underline; text-underline-offset: 4px; min-height: 48px; }
.end-note { margin: -4px 0 4px; font: 700 15px/1.3 var(--font-body); color: var(--ink-2); text-align: center; }
html[data-theme="dark"] .btn-cta { color: #fff; }
html[data-theme="dark"] .btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line-2); }
@media (max-height: 480px) { .end-card { padding: 18px 20px 14px; } .end-title { font-size: 22px; margin-bottom: 6px; } .end-sub { font-size: 16px; margin-bottom: 12px; } .btn { min-height: 48px; } }

/* A picture is shown whole, as it was drawn (no crop of a face, 07.10 decision 13): book-design.css fills the art box with
   object-fit:cover; here the same box shows the whole picture, the paper (the page's own tint) fills what is left. */
/* 19.10 (Oz item 10): replaced. The picture now FILLS its page (book-design.css: object-fit cover, the crop computed per page so the
   face stays in view, overlayPlan); the spread's art page (.725) differs from the art (.75) by 3 % of its width only. */

/* A highlight on hover only where a pointer can hover: on a phone it stuck after a tap and the Next button looked switched off. */
@media (hover: hover) {
  .iconbtn:hover, .toolbtn:hover, .navbtn:hover, .backbtn:hover { background: var(--soft); }
  .btn-cta:hover { background: var(--cta-hover); }
  .btn-primary:hover { background: var(--accent-dark); }
  .btn-secondary:hover { background: var(--soft); }
  .btn-quiet:hover { color: var(--ink); }
  html[data-theme="dark"] .iconbtn:hover, html[data-theme="dark"] .toolbtn:hover, html[data-theme="dark"] .navbtn:hover,
  html[data-theme="dark"] .btn-secondary:hover { background: #33291F; }
  html[data-theme="dark"] .btn-primary:hover { background: #E8482A; }
}
/* turn.css and immersive.css set their own hover colours; on a touch screen those hovers are switched off here, nothing else changes. */
@media (hover: none) {
  #readerTools .toolsel:hover { background: transparent; }
  html[data-theme="dark"] #readerTools .toolsel:hover { background: transparent; }
  html.is-immersive #topbar .iconbtn:hover, html.is-immersive #readerTools .toolbtn:hover, html.is-immersive #readingControls .navbtn:hover,
  html.is-immersive #readerTools .toolsel:hover { background: var(--imm-btn); }
}

/* ---------- 07.10 (V track, round 2): shared link banner; the last crops (locked page, "The End" picture) become whole pictures ---------- */
.share-banner { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; padding: 6px 16px; background: var(--soft); border-bottom: 1px solid var(--line); color: var(--ink-2); font: 700 16px/1.3 var(--font-body); }
.share-banner a { color: var(--accent); text-underline-offset: 3px; font-weight: 700; padding: 6px 2px; }
html[data-theme="dark"] .share-banner a { color: #FFB59E; }
@media (max-height: 400px) { .share-banner { display: none; } }
/* The free preview's locked pages and the fallback locked page: the server's soft picture is shown whole (it was drawn whole), the paper fills the rest. */
.page-locked-img { object-fit: contain; object-position: 50% 50%; }   /* 19.10: design D's locked page fills its page (book-design.css) */
/* "The End" (09.10): the last picture is shown whole in the end spread's arched window (book-design.css .bd-arch-end, at the art's own shape). */

/* Fix round 1007b: on a narrow phone the title shared one row with Back, Listen, Read text and fullscreen and got ~70px (three lines, cut off).
   It now has a row of its own under the buttons: full width, whole words, at most two lines. Short embeds (below) keep the one-row bar. */
@media (max-width: 480px) and (min-height: 561px) {
  #topbar { height: auto; flex-wrap: wrap; row-gap: 2px; padding-top: 6px; padding-bottom: 6px; }
  #bookTitle { order: 3; flex: 0 0 100%; text-align: center; font-size: 16px; line-height: 1.25; overflow-wrap: normal; word-break: normal;
    -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ---------- 19.10 reader chrome (Oz item 14: "Previous, Next, Page 1/12 ... Read text, it is crooked"): real books only ----------
   Cream pills with icons (STYLE.md: radius 999, rgba(255,246,227,.92), soft shadow, Fredoka 600, tap targets >= 44 px), the
   position as "3 / 12" over a thin gold bar (the full sentence stays in #progress for screen readers), Next is the one dark pill.
   A warm paper desk behind the book instead of the flat background. The landing's book.json sample keeps its old chrome. */
html.manifest-mode, html.manifest-mode body, html.manifest-mode #stage { background: radial-gradient(120% 70% at 50% 0%, #fffaf3 0, #f7ede0 58%, #efdfcb 100%); }
.manifest-mode #topbar { height: auto; min-height: 56px; gap: 8px; border-bottom: 0; color: #33291f;
  padding: max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
.manifest-mode #bookTitle { font: 600 16px/1.25 var(--font-head); color: #33291f; letter-spacing: .005em; }
.manifest-mode #topActions { margin-left: auto; gap: 8px; }
.manifest-mode .iconbtn, .manifest-mode .backbtn, .manifest-mode .toolbtn {
  min-height: 44px; min-width: 44px; padding: 0 15px; gap: 7px; justify-content: center; border: 0; border-radius: 999px;
  background: rgba(255, 246, 227, .94); color: #33291f; font: 600 15px/1 var(--font-head);
  box-shadow: 0 2px 10px rgba(51, 41, 31, .16), inset 0 0 0 1px rgba(51, 41, 31, .07); transition: transform .2s ease-out, background .2s ease-out; }
.manifest-mode .iconbtn:active, .manifest-mode .navbtn:active, .manifest-mode .toolbtn:active { transform: scale(.96); }
.manifest-mode .iconbtn .ic, .manifest-mode .backbtn .ic { display: flex; font-size: 18px; line-height: 1; }
.manifest-mode .iconbtn .ic svg { width: 20px; height: 20px; display: block; }
.manifest-mode #btnFullscreen { padding: 0; width: 44px; }
.manifest-mode #btnFullscreen .svg-exit, .manifest-mode #btnFullscreen[aria-pressed="true"] .svg-enter { display: none; }
.manifest-mode #btnFullscreen[aria-pressed="true"] .svg-exit { display: block; }
.manifest-mode .iconbtn .lbl { display: inline; }   /* Listen and Read text keep their words on every size (PDF: icon on phones) */
/* the page-turn row */
.manifest-mode #readingControls { gap: 16px; min-height: 70px; padding: 8px max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.manifest-mode .navbtn { height: 50px; min-width: 50px; padding: 0 16px; gap: 4px; border: 0; border-radius: 999px; background: rgba(255, 246, 227, .94); color: #33291f;
  font: 600 17px/1 var(--font-head); box-shadow: 0 2px 10px rgba(51, 41, 31, .18), inset 0 0 0 1px rgba(51, 41, 31, .07); transition: transform .2s ease-out, opacity .2s ease-out; }
.manifest-mode .navbtn .chev { width: 22px; height: 22px; flex: none; }
.manifest-mode .navbtn-next { padding: 0 14px 0 22px; background: #33291f; color: #fff6e3; box-shadow: 0 4px 14px rgba(51, 41, 31, .32); }
.manifest-mode .navbtn-prev { padding: 0 18px 0 12px; }
.manifest-mode .navbtn[disabled] { opacity: .4; }
.progress-box { display: none; }
.manifest-mode .progress-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 92px; position: relative; }
.manifest-mode .progress-vis { font: 600 16px/1.1 var(--font-head); color: #6b5844; white-space: nowrap; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.manifest-mode .progress-vis.is-story { color: #33291f; font-size: 18px; letter-spacing: .04em; }
.manifest-mode .progress-bar { width: 104px; height: 4px; border-radius: 2px; background: rgba(51, 41, 31, .13); overflow: hidden; }
.manifest-mode .progress-bar span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #f2c230, #e2a21c); transform-origin: 0 50%; transform: scaleX(0); transition: transform .28s ease-out; }
.manifest-mode #progress.progress-sr { position: absolute; width: 1px; height: 1px; min-width: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: -1px; }
/* the delivered book's options row: the same pills, a little smaller */
.manifest-mode .toolbtn { min-height: 44px; min-width: 44px; padding: 0 13px; font-size: 15px; white-space: nowrap; }
.manifest-mode .toolbtn[aria-pressed="true"] { background: #33291f; color: #fff6e3; }
.manifest-mode .toolsel { min-height: 44px; border: 0; border-radius: 999px; padding: 0 6px 0 14px; background: rgba(255, 246, 227, .94); box-shadow: 0 2px 10px rgba(51, 41, 31, .14); font: 600 14px/1.2 var(--font-head); }
@media (hover: hover) {
  .manifest-mode .iconbtn:hover, .manifest-mode .navbtn-prev:hover, .manifest-mode .toolbtn:hover, .manifest-mode .backbtn:hover { background: #fff; }
  .manifest-mode .navbtn-next:hover { background: #4a3c2e; }
}
/* the one-page layout (phones, portrait tablets): the page is a card on the desk */
/* (no mode-dependent padding here: the layout choice reads the box size, a padding that changed with it would flip it back) */
@media (max-width: 1100px) { .manifest-mode #bookWrap { padding: 4px max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left)); } }
#book.turn-on.bd-phone .turn-shift .slot-single:not(.bd-cover) { border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(51, 41, 31, .45), 0 2px 6px rgba(51, 41, 31, .12); }
#book.bd-phone .page.bd-page:not(.bd-cover):not(.bd-back) { border-radius: 10px; }
/* phones: labels on Listen and Read text only (PDF and full screen are icons); Previous is the arrow alone */
@media (max-width: 700px) { .manifest-mode .navbtn-prev span { display: none; } .manifest-mode .navbtn-prev { padding: 0; width: 50px; } }
@media (max-width: 480px) {
  .manifest-mode #btnPdf .lbl { display: none; }
  .manifest-mode #btnPdf { padding: 0; width: 44px; }
  .manifest-mode .iconbtn { padding: 0 13px; }
  .manifest-mode #readingControls { gap: 12px; }
  .manifest-mode .iconbtn .lbl { display: inline; }
  .manifest-mode #btnPdf .lbl { display: none; }
}
@media (max-width: 480px) {
  .manifest-mode .backbtn .lbl { display: none; }   /* the arrow alone (aria-label "Back to the UniqueBook page"): one row of buttons */
  .manifest-mode .backbtn { padding: 0; width: 44px; justify-content: center; }
}
@media (max-width: 480px) and (min-height: 561px) {
  .manifest-mode #topbar { flex-wrap: wrap; justify-content: flex-end; }
  .manifest-mode #bookTitle { font-size: 15px; }
}
/* the free preview inside the quiz: no title row (the quiz names the book), the two buttons sit at the right */
.manifest-mode #stage.framed-preview #topbar { min-height: 52px; padding-top: 6px; padding-bottom: 2px; }
/* "Read text": the whole story as a calm page */
.manifest-mode #textReader { padding: 22px 24px 26px; border: 0; border-radius: 20px; background: #fffaf2; box-shadow: 0 24px 60px rgba(51, 41, 31, .35); }
.manifest-mode #textReader .reader-heading { position: sticky; top: -22px; padding: 4px 0 10px; background: #fffaf2; align-items: center; }
.manifest-mode #textReader h2 { font: 600 22px/1.25 var(--font-head); color: #33291f; }
.manifest-mode #btnCloseText { flex: none; padding: 0 14px; }
.manifest-mode #storyText { font: 400 19px/1.7 "Literata", Georgia, serif; color: #33291f; }
html.manifest-mode[data-theme="dark"], html.manifest-mode[data-theme="dark"] body, html.manifest-mode[data-theme="dark"] #stage { background: var(--bg); }
html.manifest-mode[data-theme="dark"] #topbar, html.manifest-mode[data-theme="dark"] #bookTitle { color: var(--ink); }
html.manifest-mode[data-theme="dark"] .iconbtn, html.manifest-mode[data-theme="dark"] .navbtn-prev, html.manifest-mode[data-theme="dark"] .toolbtn,
html.manifest-mode[data-theme="dark"] .backbtn, html.manifest-mode[data-theme="dark"] .toolsel { background: #33291f; color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
html.manifest-mode[data-theme="dark"] .navbtn-next { background: #f2c230; color: #221d19; }
html.manifest-mode[data-theme="dark"] .progress-vis, html.manifest-mode[data-theme="dark"] .progress-vis.is-story { color: var(--ink); }
html.manifest-mode[data-theme="dark"] .progress-bar { background: rgba(255, 246, 227, .16); }
html.manifest-mode[data-theme="dark"] #textReader, html.manifest-mode[data-theme="dark"] #textReader .reader-heading { background: var(--paper); }
html.manifest-mode[data-theme="dark"] #textReader h2, html.manifest-mode[data-theme="dark"] #storyText { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .manifest-mode .progress-bar span { transition: none; } }

/* ---------- 19.10 first impression (item 11): the book rises in once; the turn hint on the cover (touch, one-page layout) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.manifest-mode[data-book-ready] #bookViewport { animation: ub-book-in 760ms cubic-bezier(.2, .75, .25, 1) both; }
  @keyframes ub-book-in { from { opacity: 0; transform: translateY(14px) scale(.965); } to { opacity: 1; transform: none; } }
  .manifest-mode .navbtn-next.nudge { animation: ub-nudge 1.6s 1.1s ease-out 3; }
  @keyframes ub-nudge { 0% { box-shadow: 0 4px 14px rgba(51, 41, 31, .32), 0 0 0 0 rgba(242, 194, 48, .75); }
    70% { box-shadow: 0 4px 14px rgba(51, 41, 31, .32), 0 0 0 12px rgba(242, 194, 48, 0); } 100% { box-shadow: 0 4px 14px rgba(51, 41, 31, .32), 0 0 0 0 rgba(242, 194, 48, 0); } }
}
html.manifest-mode[data-theme="dark"] .toolbtn[aria-pressed="true"] { background: #f2c230; color: #221d19; }

/* 19.10 mobile gate: every reader control >= 44 x 44 on any screen (the older short-screen rules made them 34-40 px) */
.manifest-mode .iconbtn, .manifest-mode .backbtn, .manifest-mode .toolbtn, .manifest-mode .toolsel { min-height: 44px !important; min-width: 44px; }
.manifest-mode .navbtn { min-height: 44px !important; min-width: 44px !important; }
.manifest-mode #btnFullscreen, .manifest-mode #btnPdf { min-width: 44px !important; }

/* 26.10 (Danilo: "CTA on every page of the landing's sample books"): the end card's button, under the page-turn row on every page of the
   landing's sample book. It is its own row in the stage (flex 0 0 auto): the book is sized to the room left, so it never covers the art. */
.sample-cta-bar { flex:0 0 auto; display:flex; justify-content:center; padding:0 16px max(12px, env(safe-area-inset-bottom)); }
.sample-cta-bar[hidden] { display:none; }
.sample-cta { display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:380px; min-height:52px; padding:12px 20px;
  text-align:center; text-decoration:none; white-space:nowrap; font-size:18px; }
#stage.has-sample-cta #readingControls { padding-bottom:6px; }
@media (max-width:760px) { .sample-cta { min-height:48px; font-size:17px; } }
@media (max-height:400px) { .sample-cta-bar { padding-bottom:max(4px, env(safe-area-inset-bottom)); } .sample-cta { min-height:38px; padding:6px 16px; font-size:15px; } }
/* UB-COVER-TITLE-1030 (owner 30.10): the free preview inside the quiz on a phone: the desk is the quiz page's colour (no second
   panel; storybook.css, same tag), the closed book keeps 6 px from the sides, a hardback's rounded corners, a soft shadow under it
   and a quieter spine strip (cover-design.css .cv-spine / .cv-hinge read as a dark frame on the left edge at this size) */
@media (max-width: 480px) {
  html.manifest-mode.preview-mode, html.manifest-mode.preview-mode body, html.manifest-mode.preview-mode #stage { background: #fdf7f1; }
  .manifest-mode.preview-mode #bookWrap { padding-left: 6px; padding-right: 6px; }
  .preview-mode #stage.framed-preview #book { filter: drop-shadow(0 10px 14px rgba(51, 41, 31, .28)) drop-shadow(0 2px 3px rgba(51, 41, 31, .16)); }   /* the leaf clips its own box-shadow; the quiz's frame only (not the /p/ share) */
  .preview-mode #book .dd-leaf.dd-front { border-radius: 3px 10px 10px 3px; }
  .preview-mode #book .dd-front .cv-spine { opacity: .45; }
  .preview-mode #book .dd-front .cv-hinge { opacity: .35; }
}