:root{font-family:"Trebuchet MS",sans-serif;color:#344c40;background:#f4f1e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.3}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #be8a54;outline-offset:4px}.reader-controls{height:64px;max-width:1440px;margin:auto;padding:8px 24px;display:flex;justify-content:space-between;align-items:center}.sound-controls{display:flex;align-items:center;gap:10px}.icon-button{border:0;background:transparent;color:#65735e;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:30px;border-radius:50%;line-height:1}.icon-button:hover{background:#e7eadc}#mute{font-size:24px}#volume{width:100px;accent-color:#657b55;cursor:pointer;min-height:36px}main{padding:0 18px 16px}.book-wrap{max-width:1400px;margin:auto;perspective:1700px}.book{min-height:calc(100svh - 80px);position:relative;background:#fffdf7;border-radius:18px;box-shadow:0 8px 40px #344c4009;overflow:hidden;transform-origin:center;will-change:transform}.cover{min-height:calc(100svh - 80px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:35px;padding:40px;text-align:center}.cover h1{font-family:Georgia,serif;font-weight:normal;font-size:clamp(34px,5vw,64px);max-width:700px;margin:0;line-height:1.12}.start-button{border:0;border-radius:50%;width:76px;height:76px;font-size:26px;color:#fffdf7;background:#456345;padding-left:11px}.story-page{min-height:calc(100svh - 80px);padding:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}.sentence{font-size:clamp(29px,3.4vw,48px);line-height:1.65;font-weight:500;text-align:center;margin:0;max-width:1050px;width:100%}.token{visibility:hidden}.token.shown{visibility:visible}.blank{display:inline-block;min-width:3.4em;padding:0 9px;background:#edf0e2;border-bottom:3px solid #9ba989;border-radius:7px;color:transparent;line-height:1.3}.blank.filled{color:inherit;background:none;border-color:transparent;padding:0;min-width:0}.blank.drop-target{background:#dce8c8;outline:3px solid #849b64}.choices{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}.choice{touch-action:none;user-select:none;border:1px solid #d6ddc8;border-radius:13px;background:#fffefb;padding:14px 28px;min-width:115px;font-size:clamp(25px,3vw,36px);color:#455a3f;box-shadow:0 4px 0 #e9ecdf}.choice:hover:enabled{background:#f0f3e6}.choice.wrong{background:#f6e7d5;border-color:#ba9062}.choice.drag-source{opacity:.3}.flying-word{position:fixed;z-index:10;pointer-events:none;display:flex;align-items:center;justify-content:center;background:#eaf0dc;border-radius:12px;color:#455a3f;font-size:32px;box-shadow:0 7px 20px #344c4020}.dragging{padding:14px 28px;transform:translate(-50%,-50%)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.reader-controls{height:56px;padding:6px 12px}main{padding:0 8px 8px}.book,.cover,.story-page{min-height:calc(100svh - 64px)}.story-page{padding:22px 16px;gap:30px}.sentence{font-size:30px}.choices{gap:10px;width:100%}.choice{min-width:0;padding:13px 17px;font-size:25px}#volume{width:85px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* The revealed illustration is the page; controls and sentence sit over it. */
html,body{min-height:100%;overflow-x:hidden}
.reader-controls{position:absolute;inset:0 0 auto;max-width:none;height:62px;padding:8px 18px;z-index:20;pointer-events:none}
.reader-controls>a,.sound-controls{pointer-events:auto;background:#fffdf7e8;border-radius:30px;box-shadow:0 2px 16px #20331d12}
.sound-controls{padding:0 8px;gap:6px}
main{padding:0}.book-wrap{max-width:none;perspective:1800px;overflow:hidden;background:#d7d5c9}
.book{min-height:100svh;border-radius:0;box-shadow:none;transform-style:preserve-3d}
.cover,.story-page{min-height:100svh}.story-page{padding:78px 36px 38px}
.story-page.revealed{height:100svh;min-height:100svh;padding:0;gap:0;position:relative;touch-action:pan-y;user-select:none}
.illustration{position:absolute;inset:0;width:100%;height:100%;background:#f4f1e8;overflow:hidden}
.illustration img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.revealed .sentence-bar{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(1000px,calc(100% - 140px));margin:0;padding:12px 22px;border-radius:18px;background:#fffdf7eb;box-shadow:0 4px 24px #20331d14;font-size:clamp(22px,2.3vw,34px);line-height:1.4;backdrop-filter:blur(10px)}
.page-nav{position:absolute;inset:0;z-index:3;pointer-events:none}
.page-nav .icon-button{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:68px;border-radius:28px;background:#fffdf7e8;color:#3e5639;font-size:47px;box-shadow:0 3px 20px #20331d20;pointer-events:auto}
.page-nav #previous{left:18px}.page-nav #next,.page-nav #restart{right:18px}
.page-nav .icon-button:disabled{opacity:0;pointer-events:none}
.page-nav .icon-button:hover:enabled{background:#fffdf7}
@media(max-width:600px){.reader-controls{padding:7px 10px}.story-page{padding:74px 18px 30px}.revealed .sentence-bar{bottom:16px;max-width:calc(100% - 28px);padding:10px 15px;font-size:22px;line-height:1.4}.page-nav .icon-button{width:44px;height:58px;font-size:39px}.page-nav #previous{left:10px}.page-nav #next,.page-nav #restart{right:10px}}
@media(max-height:500px){.revealed .sentence-bar{bottom:10px;font-size:21px;padding:7px 16px}.reader-controls{height:52px}.page-nav .icon-button{height:52px}}

.sentence-bar{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:1100px;position:relative;isolation:isolate}
.sentence-bar .sentence{min-width:0;flex:0 1 auto}.sentence-bar .icon-button{flex:0 0 44px;transform-origin:left top}
.sentence .token{display:inline-block;white-space:pre;transform-origin:left top}.blank.filled{text-align:center}
.revealed .sentence-bar{background:transparent;box-shadow:none;backdrop-filter:none}
.revealed .sentence-bar::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#fffdf7ed;box-shadow:0 4px 24px #20331d14;backdrop-filter:blur(10px);z-index:-1}
.revealed .sentence-bar.settling::before{animation:sentence-panel-in 750ms ease both}
.revealed .sentence{position:static;transform:none;width:auto;max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;font-size:inherit;line-height:inherit;backdrop-filter:none}
@keyframes sentence-panel-in{from{opacity:0}to{opacity:1}}
.page-turn-layer{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;background:#fffdf7}
.page-turn-layer>.story-page{position:absolute;inset:0;background:#fffdf7}
.curl-sheet{position:absolute;inset:0;transform-style:preserve-3d}
.curl-strip{position:absolute;left:0;top:0;height:100%;transform-style:preserve-3d;will-change:transform}
.curl-front,.curl-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fffdf7}
.curl-back{transform:rotateY(180deg);background:#f9f6ea}
.curl-front .story-page{min-height:100%;max-width:none;background:#fffdf7}
.curl-front .revealed{background:#f4f1e8}
.curl-shadow{position:absolute;top:0;bottom:0;width:80px;background:linear-gradient(90deg,transparent,#24251e,transparent);pointer-events:none;will-change:left,opacity}
@media(max-width:600px){.sentence-bar{gap:7px}.sentence-bar .icon-button{flex-basis:36px;width:36px}.revealed .sentence-bar{max-width:calc(100% - 22px)}}
.choices .choice:disabled{opacity:1}

.book-cover-art{position:relative;width:min(300px,65vw);aspect-ratio:2/3;border-radius:8px 16px 16px 8px;overflow:hidden;background:#e6ebd9;box-shadow:0 10px 32px #20331d25}
.book-cover-art img{width:100%;height:100%;object-fit:cover}.book-cover-art h1{position:absolute;inset:0 0 auto;margin:0;padding:24px 15px 48px;background:linear-gradient(#fffdf7f5,#fffdf7cc,transparent);font-size:clamp(25px,4vw,36px);line-height:1.12;color:#344c40}
.story-covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,210px));justify-content:center;gap:26px;width:100%}
.story-cover{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:6px 13px 13px 6px;box-shadow:0 6px 18px #20331d26;background:#e6ebd9;color:#344c40;text-decoration:none;transition:transform 160ms}
.story-cover:hover{transform:translateY(-5px)}.story-cover:focus-visible{outline:4px solid #577840;outline-offset:5px}
.story-cover img{width:100%;height:100%;object-fit:cover;display:block}.story-cover span{position:absolute;inset:0 0 auto;text-align:center;padding:16px 10px 35px;background:linear-gradient(#fffdf7fa,#fffdf7d9,transparent);font-size:22px;line-height:1.15;font-weight:700}
.story-page.ending-page{height:100svh;padding:75px 80px 30px;display:block;touch-action:pan-y;overflow-y:auto;background:#fffdf7}
.ending{width:100%;max-width:1050px;margin:auto;text-align:center}.ending h1,.story-shelf h1{font-size:32px;margin:8px 0 28px}.ending-actions{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:32px}.ending-actions .start-button{margin:0}
.story-shelf{max-width:1150px;margin:auto;padding:25px;text-align:center}.story-shelf>.icon-button{margin-right:auto;display:flex}
@media(max-width:600px){.story-page.ending-page{padding:74px 55px 25px}.story-covers{grid-template-columns:repeat(auto-fit,minmax(120px,180px));gap:18px}.story-cover span{font-size:19px}}
/* The word being read lights up; the missing word's blank glows in its own colour. */
.sentence .token.reading{background:#ffe7a1;border-radius:6px;box-shadow:0 0 0 3px #ffe7a1;transition:background .12s,box-shadow .12s}
.sentence .blank.reading{background:#ffd76b;box-shadow:0 0 0 3px #ffd76b}
#fullscreen{font-size:1.15rem}