/* A quiet picture book: full illustrations, free page turns, no game targets. */
.moonlight-cover{background:radial-gradient(ellipse at 75% 20%,#8394b2,#304761 75%)}
.moonlight-cover .cover-bug{width:80px;right:15px;bottom:34px;filter:drop-shadow(0 0 12px #ffe5a580)}
.moonlight-cover .cover-spark{color:#fff1bc}
.readalong-book{border-color:#fff7e7}.readalong-book .story-toolbar{background:#f9f3e6}
.narration-replay{flex-shrink:0;width:54px;height:50px;border:2px solid #dfddcb;border-radius:17px;background:#edf0e4;color:#466c6d;display:grid;place-items:center}.narration-replay svg{width:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.narration-replay:disabled{opacity:.45;cursor:default}
.moon-scene{height:clamp(300px,39vw,470px);position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 73% 10%,#7b8fae,#4e6688 45%,#314563)}
.moon-sky-stars{position:absolute;inset:0}.moon-sky-stars i{position:absolute;color:#fff2c9;font-size:24px;font-style:normal;animation:moon-twinkle 5s var(--delay) ease-in-out infinite}
.moon-disc{position:absolute;width:clamp(65px,10vw,110px);top:7%;right:21%;filter:drop-shadow(0 0 28px #fff0c945)}.moon-disc svg,.moon-little-star svg{width:100%;height:100%;display:block;fill:none;stroke:none}
.moon-cloud{position:absolute;width:150px;height:25px;border-radius:100%;background:#b3bfd02b;box-shadow:35px -13px 0 -4px #b3bfd025;top:27%;left:20%;animation:moon-cloud-drift 15s ease-in-out infinite alternate}
.moon-distant-hill{position:absolute;left:-10%;bottom:-3%;width:120%;height:43%;border-radius:50% 70% 0 0;background:#426b78;transform:rotate(-5deg)}
.moon-ground{position:absolute;left:-15%;bottom:-40%;width:140%;height:75%;border-radius:50%;background:linear-gradient(160deg,#658b85,#345d64)}
.moon-path{position:absolute;width:23%;height:48%;left:49%;bottom:-22%;border-radius:50%;transform:rotate(42deg);background:#b3b89736}
.moon-glup{position:absolute;z-index:2;width:clamp(185px,29%,320px);left:24%;bottom:5%;filter:drop-shadow(0 9px 8px #182e4426)}
.moon-little-star{position:absolute;z-index:3;width:clamp(62px,9%,100px);left:52%;bottom:11%;filter:drop-shadow(0 0 18px #ffe19175);animation:moon-star-glow 4s ease-in-out infinite}
.moon-lost .moon-little-star{width:clamp(76px,11%,116px);bottom:12%}.moon-lost .moon-glup{left:26%}
.moon-trees{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:none}
.moon-forest .moon-little-star,.moon-firefly .moon-little-star,.moon-lake .moon-little-star,.moon-hill .moon-little-star,.moon-moon .moon-little-star{left:46%;bottom:23%}
.moon-firefly>span.moon-firefly{position:absolute;z-index:4;left:65%;top:42%;width:19px;height:26px;border-radius:50%;background:#fff4a8;box-shadow:0 0 18px 8px #ffef9b66;animation:moon-firefly-float 5s ease-in-out infinite}
.moon-firefly>span.moon-firefly:before,.moon-firefly>span.moon-firefly:after{content:'';position:absolute;top:-5px;width:18px;height:11px;border-radius:50%;background:#e0eef3a8}.moon-firefly>span.moon-firefly:before{right:10px;rotate:30deg}.moon-firefly>span.moon-firefly:after{left:10px;rotate:-30deg}
.moon-water-surface{display:none}.moon-scene.moon-lake{display:block}.moon-scene.moon-lake>.moon-water-surface{display:block;position:absolute;left:0;right:0;bottom:0;height:39%;background:linear-gradient(#839dac,#54778e)}
.moon-lake>.moon-ground{width:64%;left:-25%;height:57%;bottom:-25%;background:#527979}.moon-lake .moon-glup{left:9%;bottom:2%}.moon-scene.moon-lake>.moon-little-star{left:30%;bottom:20%}.moon-lake .moon-path{display:none}
.moon-water-surface>span{display:block;position:absolute;left:65%;height:4px;border-radius:50%;background:#fff0bf88;animation:moon-water 5s ease-in-out infinite}.moon-water-surface>span:nth-child(1){top:12%;width:10%}.moon-water-surface>span:nth-child(2){top:27%;width:17%;left:61%;animation-delay:-1s}.moon-water-surface>span:nth-child(3){top:47%;width:26%;left:57%;animation-delay:-2s}
.moon-hill .moon-ground,.moon-moon .moon-ground,.moon-home .moon-ground,.moon-goodnight .moon-ground{height:82%;bottom:-41%;left:0;width:115%;transform:rotate(-11deg)}
.moon-hill .moon-glup,.moon-moon .moon-glup{bottom:12%;left:32%}.moon-hill .moon-little-star,.moon-moon .moon-little-star{left:54%;bottom:32%}
.moon-moon{background:radial-gradient(ellipse at 73% 15%,#a5b7ca,#657e9f 44%,#384c69)}.moon-moon .moon-disc{width:130px;filter:drop-shadow(0 0 45px #fff4c585)}.moon-moon .moon-little-star{filter:drop-shadow(0 0 24px #ffe191);animation:moon-star-glow 3s ease-in-out infinite}
.moon-home .moon-little-star{left:59%;bottom:65%;animation:moon-star-rise 4s ease-out both,moon-star-glow 4s 4s ease-in-out infinite}.moon-home .moon-glup{left:31%;bottom:9%}
.moon-goodnight .moon-little-star{left:60%;bottom:65%;width:65px}.moon-goodnight .moon-glup{left:32%;bottom:-3%}.moon-goodnight .moon-foreground{position:absolute;z-index:3;left:24%;bottom:-19%;width:45%;height:30%;border-radius:50%;background:#53776e}.moon-goodnight .moon-path{display:none}
.readalong-copy{padding:21px 24px 24px;text-align:center;background:#fff9ec}.readalong-copy h1{font:600 clamp(23px,2.6vw,32px)/1.2 var(--display);margin:0 0 10px}.readalong-copy p{font:600 clamp(17px,1.7vw,21px)/1.55 var(--body);max-width:760px;margin:0 auto;color:#607064}.readalong-ending{display:flex;align-items:center;gap:10px}.readalong-again{display:flex;align-items:center;gap:8px;min-height:54px;padding:8px 18px;border:2px solid #fff8e8;border-radius:18px;background:#4b8e89;color:#fff;font:600 16px var(--body)}.readalong-again span{font-size:28px}.readalong-book .book-pager{gap:12px}.readalong-book h1:focus{outline:none}
@keyframes moon-twinkle{50%{opacity:.35}}@keyframes moon-star-glow{50%{filter:drop-shadow(0 0 28px #ffe9ae99)}}@keyframes moon-cloud-drift{to{translate:35px 0}}@keyframes moon-firefly-float{50%{translate:12px -10px}}@keyframes moon-water{50%{scale:1.15;opacity:.45}}@keyframes moon-star-rise{from{translate:0 150px;scale:.8}to{translate:0 0;scale:1}}
@media(max-width:760px){.moon-scene{height:300px}.moon-glup{width:190px;left:13%;bottom:4%}.moon-disc{right:14%;width:70px}.moon-little-star{left:60%;width:66px}.moon-lost .moon-glup{left:13%}.moon-lost .moon-little-star{left:65%;width:73px}.moon-forest .moon-little-star,.moon-firefly .moon-little-star{left:54%;bottom:25%}.moon-lake .moon-glup{left:0;width:170px}.moon-scene.moon-lake>.moon-little-star{left:38%;bottom:24%}.moon-hill .moon-glup,.moon-moon .moon-glup{left:15%;bottom:10%}.moon-hill .moon-little-star,.moon-moon .moon-little-star{left:56%;bottom:32%}.moon-moon .moon-disc{width:90px}.moon-home .moon-glup,.moon-goodnight .moon-glup{left:19%}.moon-goodnight .moon-little-star{width:52px}.readalong-copy{padding:20px 18px;min-height:164px;align-content:center}.readalong-copy p{font-size:17px}.narration-replay{width:45px;height:46px}.readalong-book .story-book-name{max-width:160px}.readalong-ending{gap:6px}.readalong-again{font-size:13px;min-height:48px;padding:5px 9px;gap:4px}.readalong-ending .book-home{min-height:48px}.readalong-book .book-pager:has(.readalong-ending){flex-wrap:wrap}.readalong-book .book-pager:has(.readalong-ending)>.story-page-number{flex:1;text-align:right}.readalong-ending{width:100%;justify-content:flex-end}.readalong-ending .book-home span{display:inline;font-size:13px}.readalong-book .book-pager{padding:12px}}
@media(prefers-reduced-motion:reduce){.moon-scene *{animation:none!important;transition:none!important}}
.narration-button{display:inline-flex;align-items:center;gap:8px;min-height:50px;margin-top:14px;padding:8px 20px;border:2px solid #dfddcb;border-radius:18px;background:#edf0e4;color:#466c6d;font:600 16px var(--body);cursor:pointer}.narration-button span{font-size:22px;line-height:1}.narration-start{min-height:58px;padding:10px 28px;border-color:#fff8e8;background:#4b8e89;color:#fff;font-size:19px;box-shadow:0 6px 16px rgba(75,142,137,.3)}
.read-word{border-radius:7px;padding:1px 3px;margin:0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-color .12s ease,color .12s ease}.read-word.reading{background:#ffe38a;color:#2d4944}
@media(prefers-reduced-motion:reduce){.read-word{transition:none}}

/* Fixed reading view. The illustration uses the space left between the controls
   and narration, rather than adding a fixed image height to the whole page. */
body[data-screen=story]:has(.readalong-book){overflow:hidden;overscroll-behavior:none}
body[data-screen=story]:has(.readalong-book) .topbar{display:none}
body[data-screen=story]:has(.readalong-book) .layout{position:fixed;inset:0;width:100%;height:100dvh;min-height:0;max-width:none;margin:0;padding:0;display:block;z-index:10;background:#fff9ec}
body[data-screen=story]:has(.readalong-book) main{height:100%;min-height:0;padding:0}
.readalong-book{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:0;border-radius:0;box-shadow:none}
.readalong-book .story-toolbar{padding:calc(8px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 8px max(18px,env(safe-area-inset-left));gap:14px;min-height:64px}
.readalong-book .story-book-name{max-width:none;font-size:clamp(12px,1.5vw,18px);margin-left:auto}
.readalong-book .book-home{min-height:46px}
.readalong-page{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;overflow:hidden}
.readalong-book .moon-scene{height:auto;min-height:0;container-type:size}
.readalong-book .moon-scene .moon-glup{width:min(32cqw,82cqh,360px)}
.readalong-book .moon-scene .moon-disc{width:min(11cqw,25cqh,110px)}
.readalong-book .moon-scene .moon-little-star{width:min(10cqw,22cqh,100px)}
.readalong-book .moon-goodnight .moon-little-star{width:min(8cqw,18cqh,65px)}
.readalong-book .readalong-copy{min-height:0;padding:12px 24px 14px;overflow-y:auto;overscroll-behavior:contain}
.readalong-book .readalong-copy h1{font-size:clamp(22px,2.5vw,30px);margin-bottom:7px}
.readalong-book .readalong-copy p{font-size:clamp(17px,1.7vw,21px);line-height:1.45;max-width:850px}
.readalong-book .narration-button{min-height:44px;margin-top:10px;padding:5px 20px;box-shadow:none;font-size:16px}
.readalong-book .book-pager{min-height:72px;padding:8px max(18px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));flex-wrap:nowrap;gap:12px}
.readalong-book .page-arrow{width:58px;height:52px;font-size:46px;flex-shrink:0}
.readalong-book .readalong-ending{width:auto;gap:8px}
.readalong-book .book-pager:has(.readalong-ending){flex-wrap:nowrap}
.readalong-book .book-pager:has(.readalong-ending)>.story-page-number{flex:1;text-align:center}
@media(max-width:760px){
 .readalong-book .story-toolbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));min-height:62px}
 .readalong-book .story-book-name{max-width:230px;line-height:1.4}
 .readalong-book .moon-scene .moon-glup{width:min(65cqw,82cqh,220px)}
 .readalong-book .moon-scene .moon-disc{width:min(23cqw,25cqh,85px)}
 .readalong-book .moon-scene .moon-little-star{width:min(23cqw,23cqh,78px)}
 .readalong-book .moon-goodnight .moon-little-star{width:min(18cqw,18cqh,55px)}
 .readalong-book .readalong-copy{padding:10px 16px 12px}
 .readalong-book .readalong-copy h1{font-size:22px;margin-bottom:7px}
 .readalong-book .readalong-copy p{font-size:17px;line-height:1.4}
 .readalong-book .book-pager{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:8px}
 .readalong-book .readalong-ending .book-home span{display:none}
 .readalong-book .readalong-again{min-height:46px;font-size:13px;padding:5px 10px}
 .readalong-book .readalong-ending .book-home{min-width:44px;padding:5px 9px}
}
/* A sideways phone reads like a two-page book and keeps both controls in view. */
@media(max-height:500px) and (min-width:600px){
 .readalong-page{grid-template-columns:55% 45%;grid-template-rows:minmax(0,1fr)}
 .readalong-book .readalong-copy{display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:12px 20px}
 .readalong-book .readalong-copy h1{font-size:22px}
 .readalong-book .readalong-copy p{font-size:17px}
 .readalong-book .moon-scene .moon-glup{width:min(60cqw,80cqh,260px)}
 .readalong-book .moon-scene .moon-disc{width:min(20cqw,25cqh,85px)}
 .readalong-book .moon-scene .moon-little-star{width:min(19cqw,22cqh,78px)}
 .readalong-book .story-toolbar{min-height:54px;padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:4px}
 .readalong-book .book-pager{min-height:64px;padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
}
.talk-button{border:0;padding:0;background-color:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.talk-button:focus-visible{outline:3px solid #ffe38a;outline-offset:4px;border-radius:40%}.talk-hint{position:absolute;left:50%;top:-16%;width:46px;height:46px;margin-left:-23px;display:grid;place-items:center;border-radius:50%;background:#ffe38a;box-shadow:0 5px 14px #182e4440;opacity:0;transform:translateY(-8px) scale(.6);transition:opacity .25s ease,transform .25s ease;pointer-events:none}.moon-little-star .talk-hint{top:auto;bottom:calc(100% + 10px)}.talk-hint svg{width:26px;height:auto;fill:none;stroke:#2d4944;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.talk-ready .talk-hint{opacity:1;transform:none;animation:talk-hint-bounce 1s ease-in-out .25s infinite}.talk-speaking{animation:talk-hop .45s ease-out}.moon-little-star.talk-speaking{animation:talk-hop .45s ease-out,moon-star-glow 4s ease-in-out infinite}
@keyframes talk-hint-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes talk-hop{0%,100%{translate:0 0}40%{translate:0 -12px}}
@media(prefers-reduced-motion:reduce){.talk-ready .talk-hint{animation:none}.talk-speaking,.moon-little-star.talk-speaking{animation:none}}