/* ---------- Tokens ---------- */
:root {
  --paper: #FBF4E4; --white: #FFFDF7; --ink: #2B2A4A; --ink-soft: #5B5873;
  --tomato: #E8553A; --sun: #F6B93B; --grass: #5AA25C; --sky: #7EC4E8; --sky-pale: #CFEAF7; --dragon: #4FB286;
  --shadow: 5px 6px 0 var(--ink); --shadow-press: 1px 2px 0 var(--ink);
  --wobbly: 28px 34px 30px 26px / 30px 26px 34px 28px;
  --font-head: "Grandstander", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Andika", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.45; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--sky); outline-offset: 3px; }
.defs { position: absolute; width: 0; height: 0; }

/* ---------- Scene ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(var(--sky-pale), var(--paper) 72%); }
.cloud { position: absolute; left: 0; width: clamp(160px, 22vw, 320px); }
.cloud-1 { top: 6%; }
.cloud-2 { top: 20%; width: clamp(120px, 16vw, 240px); }
/* Painted hills start 61% (far) / 57% (near) down their images; these place that edge near 50% / 60% of the window
   and never leave a gap under the near hills. Width leaves 24px each side for parallax. */
.hills { position: absolute; left: 50%; width: max(100vw + 48px, 900px); translate: -50% 0; transition: transform .4s ease-out; }
.hills-far { bottom: min(8vh, calc(50vh - 0.262 * max(100vw + 48px, 900px))); transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -4px)); }
.hills-near { bottom: min(0px, calc(40vh - 0.288 * max(100vw + 48px, 900px))); transform: translate(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -8px)); }
.sticker { position: absolute; pointer-events: none; width: clamp(56px, 8vw, 96px); }
.sticker-plane { top: 24%; left: -140px; }
.sticker-star { top: 84px; left: 6%; rotate: -12deg; }
.sticker-crayon { bottom: 18%; right: 6%; rotate: 18deg; }

/* ---------- Frame ---------- */
main { position: relative; z-index: 1; font-family: var(--font-body); } /* follows the kid screens' script (fonts.js) */
.screen { position: relative; min-height: 100dvh; padding: 80px 16px 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo { position: fixed; top: 18px; left: 16px; z-index: 3; margin: 0; font: 800 20px/1 var(--font-head); rotate: -3deg; }
.gear { position: fixed; top: 12px; right: 12px; z-index: 3; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--ink); background: var(--white); box-shadow: var(--shadow-press); display: grid; place-items: center; }
.gear svg { width: 30px; height: 30px; }
.sketch { position: relative; }
.sketch::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: inherit; filter: url(#wobble); pointer-events: none; }

/* ---------- Kid screen ---------- */
.kid-hello, .kid-talk { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; }
/* Wide but short windows (a laptop browser): put the talking half beside the dragon so the mic is on screen. */
@media (min-width: 900px) and (max-height: 960px) {
  .screen.kid { flex-direction: row; justify-content: center; gap: 48px; padding-bottom: 24px; }
  .kid-hello { flex: 0 1 420px; }
  .kid-talk { flex: 0 1 560px; }
}
.dragon { width: clamp(150px, 26vw, 250px); height: auto; filter: drop-shadow(4px 6px 0 rgba(43, 42, 74, .16)); }
.ask { margin: 0; max-width: 14ch; text-align: center; font: 800 clamp(30px, 6vw, 56px)/1.05 var(--font-head); rotate: -1.5deg; }
.setup-note { margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--sun); border: 3px solid var(--ink); font-weight: 700; }
.bubble { width: min(640px, 100%); background: var(--white); border-radius: var(--wobbly); box-shadow: var(--shadow); padding: 18px 22px; }
.bubble textarea { display: block; width: 100%; border: 0; background: transparent; resize: none; outline: none; color: var(--ink); font: 700 clamp(20px, 3.4vw, 28px)/1.3 var(--font-body); }
.bubble textarea::placeholder { color: #9C98AE; }
.mic-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mic { position: relative; touch-action: manipulation; width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--ink); background: var(--tomato); color: var(--white); box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .12s, box-shadow .12s; }
.mic svg { width: 50px; height: 50px; }
.mic:active { transform: translate(4px, 4px); box-shadow: var(--shadow-press); }
.mic.listening { background: var(--grass); }
.mic.listening::before, .mic.listening::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 5px solid var(--sun); animation: ripple 1.6s ease-out infinite; }
.mic.listening::after { animation-delay: .8s; }
.mic.thinking { background: var(--sun); color: var(--ink); animation: wiggle .5s ease-in-out infinite; cursor: progress; }
.voice-line { width: 240px; height: 40px; }
.mic-status { margin: 0; padding: 4px 14px; border-radius: 999px; background: rgba(255, 253, 247, .88); text-align: center; font-weight: 700; color: var(--ink); }
.big-button { min-height: 72px; padding: 14px 34px; border-radius: 999px; border: 4px solid var(--ink); background: var(--sun); color: var(--ink); box-shadow: var(--shadow); font: 800 clamp(24px, 4vw, 32px)/1 var(--font-head); transition: transform .12s, box-shadow .12s; }
.big-button:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: var(--shadow-press); }
.big-button:disabled { opacity: .5; cursor: not-allowed; }
.chip { min-height: 64px; padding: 10px 22px; border-radius: 999px; border: 3px solid var(--ink); background: var(--white); box-shadow: 3px 4px 0 var(--ink); font: 700 18px/1 var(--font-head); transition: transform .12s, box-shadow .12s; }
.chip:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.chip:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Error card ---------- */
.oops { position: fixed; left: 50%; bottom: 16px; z-index: 20; width: min(560px, calc(100% - 32px)); translate: -50% 0; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--white); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); animation: pop .35s ease-out; }
.oops img { width: 56px; }
.oops-kid { margin: 0; font: 800 20px/1.2 var(--font-head); }
.oops-grownup { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }
.oops-close { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); font: 800 22px/1 var(--font-head); }

/* ---------- Dialogs ---------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); }
dialog::backdrop { background: rgba(43, 42, 74, .45); }
.lock { width: min(360px, calc(100% - 32px)); }
.lock-card { background: var(--white); border: 4px solid var(--ink); border-radius: var(--wobbly); box-shadow: var(--shadow); padding: 22px; text-align: center; }
.lock h2 { margin: 0 0 4px; font: 800 22px/1.2 var(--font-head); }
.lock-question { margin: 0 0 12px; font: 800 30px/1.2 var(--font-head); }
.lock-answer { min-height: 56px; margin: 0 0 12px; padding: 8px; border: 3px dashed var(--ink-soft); border-radius: 16px; font: 800 32px/1.2 var(--font-head); }
.lock-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lock-pad button { min-height: 60px; border-radius: 16px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 2px 3px 0 var(--ink); font: 800 24px/1 var(--font-head); }
.lock-pad .ok { background: var(--grass); color: var(--white); }
.lock-cancel { margin-top: 12px; min-height: 44px; border: 0; background: none; color: var(--ink-soft); text-decoration: underline; }
.lock.shake .lock-card { animation: shake .4s; }
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(460px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; }
.drawer-sheet { height: 100%; overflow-y: auto; padding: 20px 20px 40px; background: var(--paper); border-left: 4px solid var(--ink); }
.drawer[open] .drawer-sheet { animation: slide-in .25s ease-out; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.drawer h2 { margin: 0; font: 800 28px/1.1 var(--font-head); }
.drawer h3 { margin: 22px 0 6px; font: 800 19px/1.2 var(--font-head); }
.field { display: block; margin: 10px 0; }
.field > span { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.field select, .text-input { width: 100%; min-height: 48px; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); font: 400 17px/1.2 var(--font-body); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.key-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.check { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 15px; }
.check input { width: 22px; height: 22px; }
.badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--grass); color: var(--white); font: 700 12px/1.4 var(--font-body); }
.hint { margin: 6px 0; font-size: 14px; color: var(--ink-soft); }
.field-hint { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.cost { margin-top: 18px; padding: 4px 14px 14px; border: 3px solid var(--ink); border-radius: 18px; background: var(--white); }
.cost-total { font: 800 32px/1 var(--font-head); }
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 10px; font-size: 15px; }
.cost-grid div { display: flex; justify-content: space-between; }
.word-check { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: #FFF1C9; border: 3px solid var(--sun); font-size: 15px; }

/* ---------- Making ---------- */
.dragon-paint { width: clamp(170px, 30vw, 280px); }
.making-status { margin: 0; text-align: center; font: 800 clamp(26px, 5vw, 44px)/1.1 var(--font-head); }
.page-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; }
.page-row li { width: 64px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 10px; border: 3px dashed var(--ink-soft); background: var(--white); }
.page-row li.waiting { animation: wiggle 1.4s ease-in-out infinite; }
.page-row li.waiting:nth-child(2n) { animation-delay: -.7s; }
.page-row li.done { border: 3px solid var(--ink); box-shadow: 2px 3px 0 var(--ink); animation: flip-in .5s ease-out; }
.page-row li.failed { border: 3px solid var(--tomato); background: #FFE3DB; }
.page-row img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-row li.written { background: var(--white) repeating-linear-gradient(transparent 0 7px, #9fb7cc 7px 9px); }
/* The story writing itself on a notebook page while the pictures wait. */
.draft-paper { position: relative; width: min(560px, 100%); max-height: 34vh; overflow-y: auto; padding: 12px 20px 14px 46px; border: 3px solid var(--ink); border-radius: 12px 16px 14px 12px; box-shadow: var(--shadow); rotate: -1deg;
  background: var(--white) repeating-linear-gradient(transparent 0 31px, #cfe3f2 31px 33px); background-attachment: local; }
.draft-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 32px; width: 2px; background: #f2a7a0; }
.draft-title { position: sticky; top: -12px; z-index: 1; margin: -12px 0 0; padding-top: 12px; background: var(--white); font: 800 23px/33px var(--font-head); }
.draft-pages { margin: 0; padding: 0 0 0 1.2em; font: 700 19px/33px var(--font-body); }
.draft-pages li::marker { color: var(--ink-soft); font-size: .8em; }
.draft-pages li.writing::after { content: ""; display: inline-block; width: .45em; height: .95em; margin-left: 3px; vertical-align: -.12em; border-radius: 2px; background: var(--tomato); animation: caret 1s steps(2) infinite; }
@media (min-width: 900px) and (max-height: 960px) {
  .dragon-paint { width: clamp(120px, 18vh, 200px); }
  .draft-paper { max-height: 26vh; }
}

/* ---------- Reader ---------- */
.page-number { margin: 0; font: 800 20px/1 var(--font-head); }
.reader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: min(760px, 100%); }
.stage { --page-w: min(100%, 460px, calc((100dvh - 190px) * 2 / 3)); display: grid; place-items: center; touch-action: pan-y; }
#readingScreen { overflow-x: clip; } /* a page turned over past the screen's edge never makes it scroll sideways */
.arrow { width: 72px; height: 72px; border-radius: 50%; border: 4px solid var(--ink); background: var(--sun); box-shadow: var(--shadow); display: grid; place-items: center; font: 800 40px/1 var(--font-head); transition: transform .12s, box-shadow .12s; }
.arrow:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: var(--shadow-press); }
.arrow:disabled { opacity: .35; cursor: default; }
.thumbs { list-style: none; margin: 0; padding: 6px 6px 10px; display: flex; gap: 10px; max-width: min(760px, 100%); overflow-x: auto; }
.thumbs button { display: block; width: 52px; aspect-ratio: 2 / 3; padding: 0; overflow: hidden; border-radius: 8px; border: 3px solid var(--ink); background: var(--white); }
.thumbs button[aria-current="true"] { outline: 4px solid var(--tomato); outline-offset: 2px; }
.thumbs button.waiting { animation: wiggle 1.4s ease-in-out infinite; }
.thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.language-menu { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.language-menu [aria-pressed="true"] { background: var(--sun); }
.translate-row { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.translate-row .field { flex: 1 1 220px; margin: 0; }
.stars { position: fixed; left: 50%; top: 45%; z-index: 30; pointer-events: none; }
.star { position: absolute; width: 44px; margin: -22px 0 0 -22px; animation: burst 1.1s ease-out forwards; }
@media (max-width: 560px) {
  .reader { grid-template-columns: 1fr 1fr; }
  .stage { grid-column: 1 / -1; grid-row: 1; }
  .arrow { justify-self: center; }
}

/* ---------- Book page ---------- */
.page { position: relative; width: var(--page-w, min(100%, 460px)); min-width: min(100%, 240px); aspect-ratio: 2 / 3; overflow: hidden; isolation: isolate; container-type: inline-size; border-radius: 18px; border: 4px solid var(--ink); background: var(--white); box-shadow: 8px 10px 0 var(--ink); }
.page > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } /* the page turns; its picture never drags off */
/* The book: its pages are sheets of paper, which the page-flip library curls and turns. A right-to-left book is its mirror
   image, with each page mirrored back. */
.book-frame { position: relative; width: var(--page-w); min-width: min(100%, 240px); }
@supports (width: round(down, 1px, 1px)) { .book-frame { width: round(down, var(--page-w), 1px); } } /* whole pixels: sharp words */
.sheet > .page { width: 100%; height: 100%; min-width: 0; aspect-ratio: auto; }
.book.mirrored { transform: scaleX(-1) translateZ(0); }
.book.mirrored .sheet > .page { transform: scaleX(-1); }
/* The back of a page curling over (the library draws it with a copy of the page, after its shadows): plain paper. */
.stf__hardInnerShadow ~ .stf__item .page { background: #FFF6E0; }
.stf__hardInnerShadow ~ .stf__item .page > * { visibility: hidden; }
.painting { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; text-align: center; background: rgba(251, 244, 228, .9); font: 800 22px/1.2 var(--font-head); }
.painting img { width: 45%; animation: bob 2s ease-in-out infinite; }
.painting.failed { background: #FFE3DB; }
.text-panel { position: absolute; z-index: 2; font-family: var(--font-body); font-weight: 700; line-height: 1.16; pointer-events: none; }
.text-panel.top { top: 0; left: 0; right: 0; padding: 7% 7% 10%; text-align: center; }
.text-panel.bottom { bottom: 0; left: 0; right: 0; padding: 10% 7% 6%; text-align: center; }
.text-panel.left { top: 7%; left: 4%; width: 55%; padding: 5%; text-align: left; }
.text-panel.right { top: 7%; right: 4%; width: 55%; padding: 5%; text-align: right; }
/* "Drawn in": chunky hand lettering inked from the picture (reader.js sets --ink and --outline per page). */
.text-panel.storybook { padding: 0; color: var(--ink, #2b2a4a); font: 800 clamp(18px, 8cqi, 46px)/1.12 var(--font-head); text-shadow: var(--outline); rotate: -1.5deg; }
.text-panel.storybook.top { top: 4.5%; left: 6%; right: 6%; }
.text-panel.storybook.bottom { top: auto; bottom: 5%; left: 6%; right: 6%; }
.text-panel.storybook.left { top: 6%; left: 5%; width: 56%; }
.text-panel.storybook.right { top: 6%; right: 5%; width: 56%; }
.text-panel.storybook .line { display: block; margin: .08em 0; text-wrap: balance; }
.text-panel.storybook .w { display: inline-block; rotate: var(--r); translate: 0 var(--y); }
.text-panel.inking { visibility: hidden; }
.text-panel.card { left: 6% !important; right: 6% !important; width: auto !important; padding: 16px 18px !important; text-align: center !important; border-radius: 20px; background: rgba(255,255,255,.92); color: var(--ink); font-size: clamp(15px, 5.6cqi, 28px); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
.text-panel.card.top { top: 4%; bottom: auto; } .text-panel.card.bottom { bottom: 4%; top: auto; } .text-panel.card.left, .text-panel.card.right { top: 4%; bottom: auto; }
.text-panel.comic { padding: 16px 20px !important; border-radius: 34px; border: 3px solid var(--ink); background: rgba(255,248,232,.94); color: var(--ink); font-size: clamp(15px, 5.6cqi, 28px); }
.text-panel.comic.top { top: 4%; left: 6%; right: 6%; text-align: center; } .text-panel.comic.bottom { bottom: 4%; left: 6%; right: 6%; text-align: center; }
.text-panel.comic.left { top: 7%; left: 4%; width: 55%; text-align: left; } .text-panel.comic.right { top: 7%; right: 4%; width: 55%; text-align: right; }
.cover .text-panel { font: 800 clamp(26px, 10cqi, 52px)/1.02 var(--font-head); }
.cover-title { display: block; color: #c82c6b; text-shadow: 0 3px 0 #fff, 0 0 13px #fff; }
.cover .subtitle { display: block; margin-top: 10px; font-size: .46em; line-height: 1.18; color: #237b3b; text-shadow: 0 2px 0 #fff, 0 0 10px #fff; }
.cover .text-panel.card .cover-title, .cover .text-panel.comic .cover-title { color: inherit; text-shadow: none; }
.cover .text-panel.storybook { font-size: clamp(26px, 11cqi, 60px); line-height: 1.02; }
.cover .text-panel.storybook .cover-title, .cover .text-panel.storybook .subtitle { color: inherit; text-shadow: inherit; }
.cover .text-panel.storybook .subtitle { margin-top: .35em; font-size: .42em; }

/* ---------- Online: invite list ---------- */
.invite-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.invite-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); word-break: break-all; }
.invite-list .chip { min-height: 44px; padding: 6px 14px; font-size: 15px; }

/* ---------- Bookshelf ---------- */
.shelf-button { display: inline-flex; align-items: center; gap: 8px; }
.shelf-button svg { width: 24px; height: 24px; }
.shelf-head { display: flex; align-items: center; gap: 16px; width: min(900px, 100%); }
.shelf-title { margin: 0; font: 800 clamp(28px, 5vw, 44px)/1.1 var(--font-head); }
.shelf-person { grid-column: 1 / -1; margin-top: 12px; padding-bottom: 4px; border-bottom: 2px dashed var(--ink-soft); font: 800 18px/1.2 var(--font-body); overflow-wrap: anywhere; }
.shelf-grid { list-style: none; margin: 0; padding: 0; width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px; }
.book-card { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.book-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 12px; border: 3px solid var(--ink); background: var(--white); box-shadow: 4px 5px 0 var(--ink); }
.book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.book-card.waiting .book-cover { animation: wiggle 1.4s ease-in-out infinite; }
.book-card:active .book-cover { transform: translate(3px, 3px); box-shadow: var(--shadow-press); }
.book-title { font: 800 17px/1.2 var(--font-head); }
.book-date { font-size: 14px; color: var(--ink-soft); }
.ribbon { position: absolute; left: 0; right: 0; bottom: 8px; padding: 2px 6px; background: var(--sun); border-block: 2px solid var(--ink); text-align: center; font: 800 13px/1.3 var(--font-head); }
.shelf-empty { display: grid; justify-items: center; gap: 12px; text-align: center; font: 800 22px/1.3 var(--font-head); }
.shelf .mic-status:empty { display: none; }
.chip.danger { background: #ffe3db; border-color: var(--tomato); }

/* ---------- Reading guide ---------- */
/* The open page's words on their own strip of paper under the book, as wide as the space between the arrows. */
.reading-strip { --guide-paper: #FFF6E0; grid-column: 2; grid-row: 2; margin-top: 8px; overflow: hidden; container-type: inline-size; border-radius: 18px; border: 4px solid var(--ink); background: var(--guide-paper); box-shadow: 8px 10px 0 var(--ink); }
.reading-strip[hidden] { display: none; }
@media (max-width: 560px) { .reading-strip { grid-column: 1 / -1; } } /* a phone: the arrows sit under it */
/* One line of big words that runs off the edge and glides along under the reading finger. */
.guide { --handle: clamp(76px, 22cqi, 96px); position: relative; overflow: hidden; overflow: clip; padding: clamp(24px, 7cqi, 44px) calc(var(--handle) / 2 + 4px) calc(var(--handle) + 4cqi); background: var(--guide-paper); color: var(--ink); font: 800 clamp(38px, 15cqi, 72px)/1.05 var(--font-head); user-select: none; -webkit-user-select: none; }
.guide-words { display: flex; flex-wrap: nowrap; align-items: flex-end; column-gap: 1em; width: max-content; transition: transform .25s ease-out; will-change: transform; }
.guide.held .guide-words { transition: none; } /* glued to the finger while it's held */
.guide-sentence { display: flex; flex-wrap: nowrap; align-items: flex-end; column-gap: .42em; }
.guide::before, .guide::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 1.4em; pointer-events: none; opacity: 0; transition: opacity .2s; }
.guide::before { left: 0; background: linear-gradient(to right, var(--guide-paper) 20%, transparent); }
.guide::after { right: 0; background: linear-gradient(to left, var(--guide-paper) 20%, transparent); }
.guide.more-left::before, .guide.more-right::after { opacity: 1; }
.gw { position: relative; display: inline-flex; align-items: flex-end; cursor: pointer; }
.gbar { position: absolute; z-index: 0; left: -.1em; right: -.1em; bottom: 0; height: .8em; overflow: hidden; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 2px rgba(43, 42, 74, .14); }
.gbar::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: calc(var(--fill, 0) * 100%); background: var(--sun); }
.gp { position: relative; z-index: 1; display: inline-flex; flex-direction: column; align-items: center; }
.gt { display: block; padding: 0 .01em .08em; }
.gt i { font-style: normal; color: rgba(43, 42, 74, .38); transition: color .12s; }
.gt i.read { color: var(--ink); }
.gp.silent .gt i { color: rgba(43, 42, 74, .26); }
.gm { display: grid; place-items: center; width: 100%; height: .8em; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; }
button.gm { position: relative; cursor: pointer; }
button.gm::after { content: ""; position: absolute; inset: -4px 0 -20px; } /* a finger-sized tap area, mostly in the gap below */
.gm::before { content: ""; display: block; border-radius: 999px; background: currentColor; }
.gm.dot::before { width: .38em; height: .38em; }
.gm.dash::before { width: 80%; height: .3em; }
.gm.vowel { color: #2F6FD6; }
.gm.consonant { color: #E0483B; }
.gm.heart { color: #D6336C; }
.gm.heart::before { content: "♥"; background: none; border-radius: 0; font-size: .62em; line-height: 1; }
.gm.none::before { content: none; }
.gm.none { pointer-events: none; }
.guide-handle { position: absolute; left: 0; top: 0; z-index: 3; width: var(--handle); height: var(--handle); margin-left: calc(var(--handle) / -2); display: flex; justify-content: center; align-items: center; gap: 12%; padding: 0; border: 3px solid var(--ink); border-radius: 30% 30% 34% 34%; background: var(--white); box-shadow: 2px 4px 0 rgba(43, 42, 74, .35); touch-action: none; cursor: grab; transition: top .2s ease; }
.guide-handle::before { content: ""; position: absolute; top: -9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); background: var(--white); transform: rotate(45deg); }
.guide-handle span { width: 9%; height: 36%; border-radius: 999px; background: #C9CBF2; }
.guide-handle.held { cursor: grabbing; background: #F2F6FF; }
.guide:not(.ready) .guide-handle { visibility: hidden; }
.guide-toggle[aria-pressed="true"] { background: var(--sun); }
/* Other scripts: Nastaliq (Urdu) needs tall lines; right-to-left lettering leans the other way. */
.page[lang="ur"] .text-panel, .reading-strip[lang="ur"] .guide, main[lang="ur"] { line-height: 2.2; }
/* …and so do the kid screens' headings, buttons and chips, whose font shorthands set a Latin line height. */
main[lang="ur"] :is(.ask, .bubble textarea, .big-button, .chip, .making-status, .page-number, .painting, .shelf-title, .book-title, .ribbon, .shelf-empty) { line-height: 1.8; }
.page[dir="rtl"] .text-panel.storybook { rotate: 1.5deg; }
.sounds-link { margin: 6px 0 0; font-weight: 700; }
.sounds-link a { color: var(--ink); }

/* ---------- Motion ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1.03 .95; } }
@keyframes drift { from { translate: -30vw 0; } to { translate: 130vw 0; } }
@keyframes fly { from { translate: 0 0; rotate: -8deg; } 50% { translate: 60vw -40px; rotate: 6deg; } to { translate: calc(100vw + 280px) 10px; rotate: -4deg; } }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
@keyframes wiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes pop { 0% { scale: .9; } 60% { scale: 1.04; } 100% { scale: 1; } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20%, 60% { translate: -10px 0; } 40%, 80% { translate: 10px 0; } }
@keyframes flip-in { from { transform: perspective(600px) rotateY(90deg); } to { transform: none; } }
@keyframes burst { from { translate: 0 0; rotate: 0deg; scale: .4; opacity: 1; } to { translate: var(--dx) var(--dy); rotate: var(--spin); scale: 1; opacity: 0; } }
@keyframes slide-in { from { translate: 100% 0; } to { translate: 0 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes caret { 50% { opacity: 0; } }

.dragon { animation: bob 3.2s ease-in-out infinite, blink 4.5s infinite; }
body:has(.mic.thinking) .dragon-wave { animation: wiggle .5s ease-in-out infinite; }
.cloud-1 { animation: drift 90s linear infinite; }
.cloud-2 { animation: drift 130s linear -60s infinite; }
.sticker-plane { animation: fly 24s ease-in-out 3s infinite; }
.pop { animation: pop .35s ease-out; }
.screen:not([hidden]) { animation: fade-in .3s ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .screen:not([hidden]) { animation: fade-in .2s ease-out !important; }
  .cloud-2 { left: auto; right: 4%; }
  .sticker-plane { display: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .sticker-crayon { display: none; }
  .sticker-star { top: 70px; left: auto; right: 84px; }
  .two { grid-template-columns: 1fr; }
}