:root {
  --paper: #f6efe2;
  --ink: #2b2118;
  --ink-soft: #6b5a48;
  --persimmon: #e8743b;
  --mark: #ffd98a;
  --pine: #2f5d4a;
  --card: rgba(255, 250, 240, 0.86);
  --shadow: 0 10px 30px rgba(60, 35, 10, 0.18);
  --read: 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif;
  --play: 'Jua', 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); overflow: hidden; }
body { font-family: var(--read); -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; }

#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.screen.is-on { opacity: 1; pointer-events: auto; }
/* Controls that turn their own pointer events back on (the page picker) must not catch taps on a hidden screen. */
.screen:not(.is-on) * { pointer-events: none !important; }

/* ---------- cover + end ---------- */
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-body, .end-body {
  position: absolute; left: 0; right: 0; top: 0;
  padding: max(28px, env(safe-area-inset-top)) 24px 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#cover-title {
  font-family: var(--play); font-weight: 400; margin: 2vh 0 0;
  font-size: clamp(34px, 6vw, 72px); line-height: 1.12; color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 250, 240, 0.9), 0 0 24px rgba(255, 250, 240, 0.9);
  cursor: pointer;
}
.cover-en { margin: 6px 0 0; font-size: clamp(15px, 1.8vw, 20px); color: var(--ink-soft); text-shadow: 0 0 12px #fffaf0; }
.big-btn {
  margin-top: 3vh; font-family: var(--play); font-size: clamp(24px, 3.2vw, 34px);
  padding: 16px 44px; border-radius: 999px; background: var(--persimmon); color: #fff;
  box-shadow: 0 6px 0 #b8531f, var(--shadow); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8531f, var(--shadow); }
.grownup {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(640px, calc(100% - 32px)); margin: 0; padding: 12px 18px; border-radius: 16px;
  background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.grownup span { font-size: 13px; opacity: 0.85; }

.end-body { top: auto; bottom: 0; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
.end-mark { font-family: var(--play); font-size: clamp(56px, 9vw, 110px); margin: 0; color: #fff; text-shadow: 0 4px 18px rgba(80, 40, 0, 0.45); }
.next-story {
  margin-top: 18px; display: flex; gap: 12px; align-items: center; padding: 12px 20px; border-radius: 18px;
  background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: left;
}
.next-story small { display: block; color: var(--ink-soft); font-size: 13px; }
.next-story b { font-family: var(--play); font-weight: 400; font-size: 20px; }
.lock { font-size: 22px; }

/* ---------- home: language at the top, then a row of books per shelf ---------- */
#shelf { overflow-y: auto; background: var(--paper); }
.shelf-body {
  max-width: 1080px; margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.home-mark { margin: 0 0 4px; font-family: var(--play); font-size: 18px; color: var(--persimmon); letter-spacing: 0.04em; }
.shelf-title { font-family: var(--play); font-weight: 400; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.15; margin: 0; }
.shelf-sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }
.lang-switch { flex: none; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(43, 33, 24, 0.07); }
.lang-switch button { font-family: var(--play); font-size: 16px; padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); min-height: 40px; }
.lang-switch button[aria-pressed='true'] { background: #fffaf0; color: var(--ink); box-shadow: 0 2px 6px rgba(60, 35, 10, 0.14); }
/* tag filter: a row of chips that scrolls sideways on a phone */
.tag-filter { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 22px; padding: 2px 16px; scrollbar-width: none; }
.tag-filter::-webkit-scrollbar { display: none; }
.tag-filter button {
  flex: none; font-family: var(--play); font-size: 16px; padding: 8px 16px; min-height: 40px; border-radius: 999px;
  color: var(--ink); background: rgba(43, 33, 24, 0.06); white-space: nowrap;
}
.tag-filter button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.shelf + .shelf { margin-top: 30px; }
/* home footer: the apps, then the legal pages */
.home-foot { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(43, 33, 24, 0.12); display: flex; flex-direction: column; gap: 18px; }
.home-apps p { margin: 0 0 10px; font-family: var(--play); font-size: 18px; }
.home-apps .badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.home-apps .b-apple { height: 40px; display: block; }
.home-apps .b-google { height: 59px; display: block; margin: -9px; } /* Google's badge carries its own clear space */
.home-apps .soon { display: inline-block; padding: 9px 16px; border-radius: 999px; background: rgba(43, 33, 24, 0.06); color: var(--ink-soft); font-size: 14px; }
.home-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ink-soft); }
.home-legal a { color: var(--ink-soft); text-underline-offset: 3px; min-height: 32px; display: inline-flex; align-items: center; }
.home-legal small { flex-basis: 100%; font-size: 12px; }
.shelf h2 { font-family: var(--play); font-weight: 400; font-size: 22px; margin: 0 0 12px; }
.shelf-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: 16px 14px; }
.shelf-book { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); transition: transform 0.15s ease; }
.shelf-book:active { transform: scale(0.97); }
.shelf-book img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); background: #e9dcc4; }
.shelf-book span { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.shelf-book b { font-family: var(--play); font-weight: 400; font-size: clamp(17px, 2vw, 21px); line-height: 1.25; word-break: keep-all; }
.shelf-book small { color: var(--ink-soft); font-size: 13px; line-height: 1.35; }
.shelf-book i { font-style: normal; font-size: 12px; color: var(--pine); margin-top: 2px; }
/* the same book in the other language, under the start button */
.lang-chip {
  margin-top: 14px; padding: 7px 16px; border-radius: 999px; font-family: var(--play); font-size: 16px;
  color: var(--ink); text-decoration: none; background: var(--card); box-shadow: 0 2px 8px rgba(60, 35, 10, 0.12);
}
.lang-chip[hidden] { display: none; }
/* "start over" under a bookmark's "keep reading": a chip, so it reads over the cover picture */
#from-start { margin-top: 12px; padding: 7px 16px; border-radius: 999px; background: var(--card); color: var(--ink);
  text-decoration: none; font-family: var(--play); font-size: 16px; box-shadow: 0 2px 8px rgba(60, 35, 10, 0.12); }
#from-start[hidden] { display: none; }
.cover-back { position: absolute; z-index: 2; left: max(16px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); }
.text-btn { margin-top: 14px; font-size: 16px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- book ---------- */
#stage { position: absolute; inset: 0; overflow: hidden; background: #e9dcc4; }
.frame { position: absolute; inset: 0; overflow: hidden; }
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.cam.breathe { animation: breathe 18s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1.02); } to { transform: scale(1.07) translate(-0.6%, -0.4%); } }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#img-after { opacity: 0; }
/* The film fades in over the still once it is actually playing; the still covers any load delay. */
#vid { opacity: 0; transition: opacity 0.6s ease; }
#vid.on { opacity: 1; }

#flash, #glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
#flash { background: #fff6e4; }
#glow { background: radial-gradient(circle at 55% 60%, rgba(255, 200, 110, 0.55), rgba(255, 170, 60, 0) 60%); mix-blend-mode: screen; }

#pop {
  position: absolute; right: 16%; top: 38%; font-family: var(--play); font-size: clamp(60px, 11vw, 150px);
  color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; opacity: 0; pointer-events: none;
  transform: scale(0.3) rotate(-8deg);
}
#pop.go { animation: stamp 1.4s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  25% { opacity: 1; transform: scale(1.1) rotate(-6deg); }
  40% { transform: scale(1) rotate(-6deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05) rotate(-6deg); }
}

.bubble {
  position: absolute; right: 5%; bottom: 8%; display: flex; align-items: center; gap: 10px;
  max-width: min(440px, 80%); padding: 8px 20px 8px 8px; border-radius: 999px;
  background: #fffaf0; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px) scale(0.95);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none;
}
.bubble.is-on { opacity: 1; transform: none; }
.bubble img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.bubble p { margin: 0; font-size: clamp(17px, 2vw, 22px); line-height: 1.35; }
.bubble p small { display: block; font-size: 0.72em; color: var(--ink-soft); }

.topbar {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  pointer-events: none;
}
.round-btn {
  pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow); color: var(--ink);
}
/* Page picker: a native list on top of a small label, so phones show their own wheel/sheet. */
.page-pick {
  pointer-events: auto; position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  height: 44px; padding: 0 14px 0 16px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow);
  font-family: var(--play); font-size: 18px; color: var(--ink);
}
.page-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
#dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* On narrow screens the picker already says where you are; sixteen dots would not fit beside it. */
@media (max-width: 640px) { .topbar #dots { display: none; } }
#dots li { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 250, 240, 0.7); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transition: all 0.3s; }
#dots li.done { background: var(--persimmon); }
#dots li.now { width: 26px; border-radius: 6px; background: #fffaf0; }

#reader {
  position: absolute; left: max(16px, env(safe-area-inset-left)); top: calc(max(14px, env(safe-area-inset-top)) + 70px);
  max-width: min(560px, 47vw); padding: 18px 24px 14px; border-radius: 26px;
  background: var(--card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#reader.away { opacity: 0; transform: translateY(-10px); pointer-events: none; }
/* Read together: the story the app tells, above the child's own line. The sentence being read is full ink. */
#story { margin: 0 0 10px; font-family: var(--read); font-size: clamp(17px, 2vw, 22px); line-height: 1.6; word-break: keep-all; }
#story[hidden] { display: none; }
#story .st { color: var(--ink-soft); opacity: 0.55; transition: opacity 0.3s, color 0.3s; }
#story .st.now { opacity: 1; color: var(--ink); }
#story .st.told { opacity: 0.85; }
.light-text #story .st { color: #fffaf0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.no-line #line { display: none; }
.telling #line { opacity: 0.35; transition: opacity 0.4s; }
/* Scripture: verse number and how far through this page's lines the child is. */
.line-head { display: flex; align-items: center; gap: 10px; min-height: 0; }
.line-head:has(#verse:empty):has(#line-dots:empty) { display: none; }
#verse:not(:empty) {
  font-family: var(--play); font-size: 15px; color: #fff; background: var(--persimmon);
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; display: inline-grid; place-items: center;
}
#line-dots { display: inline-flex; gap: 5px; }
#line-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(43, 33, 24, 0.15); }
#line-dots i.done { background: var(--persimmon); }
#line-dots i.now { background: var(--ink); }
#line.long { font-size: clamp(26px, 3.4vw, 44px); }
/* A whole verse: a paragraph, read left to right like a page. */
#line.xlong { font-size: clamp(22px, 2.7vw, 34px); line-height: 1.55; text-align: left; }
#line { margin: 0; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.35; word-break: keep-all; letter-spacing: 0.01em; }
/* z-index: each word is its own layer, so the marker (z-index -1 below) sits behind the letters but in front of
   the reading panel. Without it the marker slid under the panel's paper and only flashed during animations. */
.w { z-index: 0; position: relative; display: inline-block; margin-right: 0.3em; padding: 0 0.04em; border-radius: 0.18em; cursor: pointer; transition: transform 0.15s; }
.w:last-child { margin-right: 0; }
.w:active { transform: scale(0.96); }
.s { position: relative; transition: color 0.2s; }
/* Lit syllables get a marker stroke behind them; unlit ones stay full ink so they're always readable. */
.s::before {
  content: ''; position: absolute; left: -0.02em; right: -0.02em; bottom: 0.08em; height: 0.42em; z-index: -1;
  background: var(--mark); border-radius: 0.12em; transform: scaleX(0); transform-origin: left; transition: transform 0.18s ease-out;
}
.w.read .s::before { transform: scaleX(1); transition-delay: calc(var(--k) * 70ms); }
.w.miss { animation: miss 0.45s ease-in-out; background: rgba(232, 116, 59, 0.16); }
@keyframes miss { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.w.help { background: rgba(232, 116, 59, 0.14); }
/* A misread word stays marked (a highlighter swipe and a wavy underline) until it is read, with how it sounds above. */
.w.stuck { background: rgba(255, 196, 61, 0.55); box-shadow: 0 0 0 0.08em rgba(255, 196, 61, 0.55);
  text-decoration: underline wavy var(--persimmon); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
/* How to read it, beside the mic: the word, how it sounds, tap to hear again. It takes the label's place. */
.coach {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px; border-radius: 999px;
  font-family: var(--read); font-size: 20px; line-height: 1; white-space: nowrap; color: #fff; background: var(--persimmon);
  box-shadow: 0 4px 12px rgba(43, 33, 24, 0.22); animation: pop-in 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.coach[hidden] { display: none; }
.coach:not([hidden]) ~ .ctrl { margin-left: auto; }
#listen:has(.coach:not([hidden])) #listen-label { display: none; }
.coach b { font-weight: normal; }
.coach span { opacity: 0.92; letter-spacing: 0.02em; }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } }
.gloss {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); white-space: nowrap;
  font-family: var(--read); font-size: 17px; line-height: 1; padding: 7px 12px; border-radius: 10px;
  background: var(--ink); color: #fffaf0; pointer-events: none; animation: rise 0.25s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 4px); } }
#line.done .w { animation: hop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both; }
#line.done .w:nth-child(2) { animation-delay: 0.06s; }
#line.done .w:nth-child(3) { animation-delay: 0.12s; }
@keyframes hop { 40% { transform: translateY(-8px); } }
.nudge { animation: nudge 1.2s ease-in-out 3; }
@keyframes nudge { 50% { background: rgba(232, 116, 59, 0.2); transform: translateY(-3px); } }

#listen { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; }
#mic { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--pine); flex: none; }
#mic { cursor: pointer; }
#mic .ring { position: absolute; inset: 0; border-radius: 50%; background: var(--pine); opacity: 0.3; animation: listen 1.8s ease-out infinite; }
@keyframes listen { from { transform: scale(1); opacity: 0.35; } to { transform: scale(1.7); opacity: 0; } }
#mic svg { position: relative; }
#mic.off { background: #b9ad9c; }
#mic.off .ring { display: none; }
/* The mic needs a tap to come back (after the screen locked): make it the thing to press. */
#mic.ask { background: var(--persimmon); animation: ask 1.1s ease-in-out infinite; }
@keyframes ask { 50% { transform: scale(1.12); } }
#listen-label { cursor: pointer; }
#listen-label { font-size: 16px; color: var(--ink-soft); line-height: 1.35; }
#listen-label small { opacity: 0.8; display: block; font-size: 0.86em; }
#listen-label b { color: var(--ink); }
/* Always there: ▶ plays this verse's film, ⏭ goes straight to the next verse. */
.ctrl { margin-left: auto; display: flex; gap: 8px; flex: none; }
.ctl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(43, 33, 24, 0.08); color: var(--ink); }
.ctl:active { transform: scale(0.94); }
.ctl:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.ctl[hidden] { display: none; }
#film-btn .i-pause, #film-btn.playing .i-play { display: none; }
#film-btn.playing .i-pause { display: block; }
#grownup-ok { flex: none; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--pine); color: #fff; font-size: 15px; }

/* Next: a big labelled button in the middle, where the words were - the words have gone by the time it shows,
   so it never covers the picture's payoff. */
.next-btn {
  position: absolute; left: 50%; translate: -50% 0; bottom: max(28px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px; height: 72px; padding: 0 30px 0 40px; border-radius: 999px;
  font-family: var(--play); font-size: 30px; background: var(--persimmon); color: #fff;
  box-shadow: 0 6px 0 #b8531f, var(--shadow); animation: beckon 1.6s ease-in-out infinite;
}
.next-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8531f, var(--shadow); animation: none; }
.next-btn[hidden] { display: none; }
@keyframes beckon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Books whose pictures fill the upper frame: words sit at the bottom centre like captions (wide screens). */
@media (orientation: landscape) {
  .text-bottom #reader {
    top: auto; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0;
    width: max-content; max-width: min(900px, calc(100% - 200px)); text-align: center;
  }
  .text-bottom .line-head, .text-bottom #listen { justify-content: center; }
  .text-bottom #reader.away { transform: translateY(10px); }
  .text-bottom .bubble { bottom: auto; top: calc(max(14px, env(safe-area-inset-top)) + 64px); }
}

/* Phones held upright: picture on top, words underneath instead of over the art. */
/* ---------- layouts (A-E, picked per orientation in settings; app.js sets lay-x on #book) ----------
   A: full bleed, paper panel (the base styles above). B: full bleed, glass panel. E: full bleed, caption words
   over a dark wash. C/D ("windowed"): the picture sits in a window (C square, D whole) over a blurred copy of
   itself, and the words sit beside or under it without covering it. app.js places the window and publishes its
   edges as --win-* on #book. */
#ambient, #shade { position: absolute; display: none; pointer-events: none; }
#ambient { inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(26px) saturate(1.25) brightness(0.68); }
.windowed #ambient { display: block; }
.windowed #stage { background: #2a1e14; }
.windowed .frame { inset: auto; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38); }
.lay-c .frame { border-radius: 18px; }

#book.lay-b #reader { background: rgba(255, 250, 240, 0.32); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
#book.lay-b #line { text-shadow: 0 0 8px rgba(255, 250, 240, 0.95); }

.lay-e #shade { display: block; inset: 0; background: linear-gradient(to top, rgba(18, 11, 4, 0.88) 0%, rgba(18, 11, 4, 0.6) 36%, rgba(18, 11, 4, 0) 66%); }
#book.lay-e #reader, #book.windowed #reader { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* light words: E and the windowed layouts set the words on dark */
.light-text #line, .light-text #listen-label { color: #fffaf0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.light-text #listen-label small { color: inherit; }
.light-text .s::before { background: #ffcf6e; height: 0.16em; bottom: -0.04em; }
.light-text .w.help, .light-text .w.miss { background: rgba(255, 180, 120, 0.28); }
.light-text .w.stuck { background: rgba(255, 196, 61, 0.38); text-decoration-color: #ffcf6e; }
.light-text .ctl { background: rgba(255, 250, 240, 0.18); color: #fffaf0; }
.light-text #line-dots i { background: rgba(255, 250, 240, 0.3); }
.light-text #line-dots i.now { background: #fffaf0; }

/* Phones held upright: the picture (or film) still fills the whole screen; the words float over its lower part
   on a frosted panel, like the wide-screen caption layout. */
@media (orientation: portrait) {
  #reader, .text-bottom #reader {
    top: auto; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); translate: none;
    width: auto; max-width: none; max-height: 62%; overflow-y: auto; text-align: left;
    padding: 18px 20px 14px; border-radius: 24px; background: rgba(255, 250, 240, 0.9);
  }
  .text-bottom .line-head, .text-bottom #listen { justify-content: flex-start; }
  #reader.away, .text-bottom #reader.away { transform: translateY(12px); }
  #line { font-size: clamp(30px, 9vw, 52px); }
  #line.long { font-size: clamp(25px, 7.4vw, 40px); }
  #line.xlong { font-size: clamp(20px, 5.6vw, 28px); }
  #listen { margin-top: 12px; }
  .bubble, .text-bottom .bubble { top: calc(max(14px, env(safe-area-inset-top)) + 64px); bottom: auto; right: 12px; max-width: calc(100% - 24px); }
  .bubble img { width: 44px; height: 44px; }
  .next-btn { bottom: max(36px, calc(env(safe-area-inset-bottom) + 24px)); }
  #pop { right: 10%; top: 26%; }

  /* cover and end: full-bleed picture, words over a soft wash */
  .cover-body { padding-top: max(64px, calc(env(safe-area-inset-top) + 56px)); }
  #cover-title { font-size: clamp(30px, 8.6vw, 48px); }
  #cover::after, #end::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 248, 235, 0.75), rgba(255, 248, 235, 0) 38%, rgba(255, 248, 235, 0) 70%, rgba(255, 248, 235, 0.7));
  }
  .cover-body, .end-body, .grownup { z-index: 1; }
  .cover-back { z-index: 2; } /* above the title block, which spans the top of the screen */
}

/* windowed layouts, upright: words under the window */
@media (orientation: portrait) {
  #book.windowed #reader {
    top: calc(var(--win-b) + 14px); bottom: max(12px, env(safe-area-inset-bottom)); max-height: none;
    padding: 6px 10px; display: flex; flex-direction: column; justify-content: flex-start;
  }
}
/* windowed layouts, lying down: C puts the words beside the square, D on a glass band over the film's foot */
@media (orientation: landscape) {
  #book.lay-c #reader {
    left: calc(var(--win-r) + 3vw); right: 3vw; top: 50%; bottom: auto; translate: 0 -50%; width: auto; max-width: none;
    text-align: left; padding: 0;
  }
  #book.lay-c .line-head, #book.lay-c #listen { justify-content: flex-start; }
  #book.lay-d #reader {
    top: auto; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); translate: -50% 0; width: max-content;
    max-width: min(900px, calc(100% - 200px)); text-align: center; background: rgba(30, 20, 10, 0.4);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  #book.lay-d .line-head, #book.lay-d #listen { justify-content: center; }
  #book.lay-d #line.xlong { text-align: left; }
  /* E with words at the top-left (the tiger book): darken from the top instead */
  #book.lay-e:not(.text-bottom) #shade { background: linear-gradient(to bottom, rgba(18, 11, 4, 0.85) 0%, rgba(18, 11, 4, 0.5) 30%, rgba(18, 11, 4, 0) 58%); }
}

/* settings */
#settings-btn { margin-left: auto; }
.page-pick { margin-left: 0; }
.settings { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(30, 20, 10, 0.45); }
.settings[hidden] { display: none; }
.settings-card {
  width: min(520px, 100%); max-height: calc(100% - 32px); overflow-y: auto; background: var(--paper); border-radius: 26px;
  padding: 22px 22px 18px; box-shadow: var(--shadow); display: grid; gap: 14px;
}
.settings-card h2 { margin: 0; font-family: var(--play); font-weight: 400; font-size: 26px; }
.settings-note { margin: -8px 0 0; color: var(--ink-soft); font-size: 14px; }
.settings-group { display: grid; gap: 8px; }
.settings-group h3 { margin: 0; font-size: 15px; color: var(--ink-soft); font-weight: 400; }
.choices { display: grid; gap: 6px; }
.choice {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 14px;
  background: rgba(43, 33, 24, 0.05); font-size: 16px;
}
.choice b { font-family: var(--play); font-weight: 400; font-size: 20px; color: var(--persimmon); width: 1.2em; }
.choice small { margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.choice[aria-pressed="true"] { background: var(--pine); color: #fff; }
.choice[aria-pressed="true"] b, .choice[aria-pressed="true"] small { color: #fff; }
.choice:focus-visible { outline: 2px solid var(--persimmon); outline-offset: 2px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-actions .big-btn { margin: 0; font-size: 22px; padding: 10px 30px; }

/* Phones on their side: short screens, so everything shrinks and the words hug the top-left. */
@media (orientation: landscape) and (max-height: 520px) {
  .round-btn { width: 42px; height: 42px; }
  #reader { top: calc(max(10px, env(safe-area-inset-top)) + 52px); padding: 12px 18px 10px; border-radius: 20px; max-width: min(460px, 50vw); }
  #line { font-size: clamp(26px, 5.2vh + 8px, 38px); }
  #line.long { font-size: clamp(22px, 4.2vh + 6px, 30px); }
  #line.xlong { font-size: clamp(17px, 3.4vh + 4px, 22px); }
  #listen { margin-top: 6px; min-height: 36px; }
  #mic { width: 36px; height: 36px; }
  #listen-label { font-size: 14px; }
  .next-btn { height: 58px; font-size: 24px; padding: 0 24px 0 32px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .bubble img { width: 42px; height: 42px; }
  .bubble p { font-size: 16px; }
  #cover-title { font-size: clamp(26px, 8vh, 44px); margin-top: 0; }
  .big-btn { margin-top: 12px; padding: 10px 34px; font-size: 22px; }
  .grownup { font-size: 12px; padding: 8px 14px; }
  .grownup span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .cam.breathe, .next-btn, .nudge { animation: none !important; }
}