@font-face{font-family:Fredoka;src:url(/stories/fonts/Fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Andika;src:url(/stories/fonts/Andika-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Andika;src:url(/stories/fonts/Andika-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--sun:#ffb627;--clay:#d9622b;--earth:#5a3417;--sand:#fff4de;--sky:#3aa6c9;--leaf:#4f9a3a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Andika,system-ui,sans-serif;color:var(--earth);background:var(--sand)}
h1,h2,h3,.btn,.brand{font-family:Fredoka,system-ui,sans-serif}
/* ---------- home ---------- */
.home{min-height:100%;background:radial-gradient(circle at 85% -10%,#ffd36e 0,#ffb627 18%,transparent 40%),linear-gradient(#fff1d0,#ffe2b0 60%,#f6c48a)}
.home header{padding:28px 20px 6px;text-align:center}
.brand{font-size:clamp(2rem,6vw,3.4rem);font-weight:700;color:var(--clay);margin:0;letter-spacing:.5px;text-shadow:0 3px 0 #fff6}
.tag{margin:.3rem 0 0;font-size:1.15rem}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;max-width:1100px;margin:24px auto;padding:0 20px 40px}
.book{position:relative;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 24px #7a3d1233;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .2s}
.book:hover,.book:focus-visible{transform:translateY(-4px) rotate(-.5deg)}
.book .cover{aspect-ratio:443/600;background:#eee center/cover no-repeat}
.book .info{padding:12px 16px 16px}
.book h3{margin:0;font-size:1.25rem;color:var(--clay)}
.book p{margin:.25rem 0 0;font-size:.98rem}
.book .go{display:inline-block;margin-top:10px;background:var(--leaf);color:#fff;border-radius:999px;padding:8px 18px;font-family:Fredoka;font-weight:600;font-size:1.05rem}
.book.soon{filter:saturate(.35);opacity:.8;pointer-events:none}
.book.soon .cover{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#ffe6bd 0 18px,#ffdcae 18px 36px);font-size:3.4rem}
.ribbon{position:absolute;top:14px;right:-36px;transform:rotate(35deg);background:var(--clay);color:#fff;font-family:Fredoka;font-weight:600;padding:4px 44px;font-size:.9rem}
footer{text-align:center;padding:10px 20px 30px;font-size:1rem}
/* ---------- player ---------- */
.player{height:100%;overflow:hidden;background:#2b1708;color:#fff}
.stage{position:fixed;inset:0}
.bgblur{position:absolute;inset:-40px;background:center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(1.2);transition:background-image .6s}
.frame{position:absolute;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);height:calc(100% - 130px - min(28vh,190px));aspect-ratio:443/718;max-width:94vw;border-radius:18px;overflow:hidden;border:5px solid var(--sand);box-shadow:0 16px 40px #0009;background:#000}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.frame img.on{opacity:1}
.frame img.kb{animation:kb 16s ease-in-out forwards}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(var(--z,1.12)) translate(var(--px,0),var(--py,0))}}
.textcard{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));width:min(94vw,760px);max-height:min(28vh,190px);overflow:auto;background:#3b1f0bcc;backdrop-filter:blur(6px);border-radius:20px;padding:12px 18px;font-size:clamp(1.05rem,2.6vw,1.45rem);line-height:1.45;text-align:center;box-shadow:0 6px 18px #0006}
.textcard .w{white-space:nowrap;border-radius:6px;padding:0 1px;transition:color .15s,background .15s}
.textcard .w.done{color:#ffd98a}
.textcard .w.now{background:var(--sun);color:#3b1f0b}
.textcard .learn{text-decoration:underline dotted 3px #8fe0ff;text-underline-offset:4px;cursor:pointer}
.textcard .learn::after{content:" 💡";font-size:.8em}
.title-card h1{margin:0;font-size:clamp(1.6rem,5vw,2.4rem);color:var(--sun)}
.title-card p{margin:.2rem 0 0;color:#ffe9c4}
.controls{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:16px}
.btn{border:0;border-radius:999px;font-size:1.25rem;font-weight:600;cursor:pointer;color:#fff;box-shadow:0 5px 0 #0005;min-width:64px;height:64px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #0005}
.btn:disabled{opacity:.35}
.btn.nav{background:var(--sky)}
.btn.play{background:var(--clay);min-width:150px;height:72px;font-size:1.45rem}
.top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.top a,.top span{pointer-events:auto;background:#0007;color:#fff;text-decoration:none;font-family:Fredoka;border-radius:999px;padding:8px 14px;font-size:1rem}
.dots{position:absolute;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:5px}
.dots i{width:8px;height:8px;border-radius:50%;background:#fff5}
.dots i.on{background:var(--sun);transform:scale(1.4)}
.bubble{position:fixed;z-index:20;max-width:300px;background:#fff;color:var(--earth);border-radius:20px;padding:14px 16px;box-shadow:0 12px 30px #0008;font-size:1.05rem;line-height:1.4;animation:pop .25s}
.bubble h3{margin:0 0 4px;color:var(--clay)}
.bubble button{margin-top:8px;background:var(--leaf);color:#fff;border:0;border-radius:999px;padding:6px 14px;font-family:Fredoka;font-size:1rem}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.overlay{position:fixed;inset:0;z-index:15;overflow:auto;display:none;place-items:center;background:#2b1708d9;padding:20px}
.overlay.show{display:grid}
.quiz{background:var(--sand);color:var(--earth);border-radius:26px;max-width:560px;width:100%;padding:22px;text-align:center;box-shadow:0 20px 50px #000a}
.quiz h2{margin:0;color:var(--clay);font-size:1.9rem}
.quiz .choices{display:grid;gap:10px;margin:14px 0}
.quiz .choices button{font-family:Andika;font-size:1.1rem;text-align:left;border:3px solid #f2c88f;background:#fff;border-radius:16px;padding:12px 14px;cursor:pointer;color:var(--earth)}
.quiz .choices button.pick{border-color:var(--leaf);background:#eaf7e4}
.quiz .fb{min-height:3em;font-size:1.1rem}
.quiz .credit{font-size:.95rem;opacity:.8}
.start{background:var(--sun);color:var(--earth)}
/* landscape: picture left, words right */
@media (orientation:landscape) and (min-width:700px){
 .frame{left:6vw;transform:none;top:24px;height:calc(100% - 130px)}
 .textcard{left:auto;right:4vw;transform:none;top:50%;bottom:auto;translate:0 -60%;width:min(48vw,640px);max-height:calc(100% - 200px);font-size:clamp(1.2rem,2.1vw,1.9rem);padding:22px 28px}
}
@media (prefers-reduced-motion:reduce){.frame img.kb{animation:none}}
.textcard .label{font-family:Fredoka;font-size:.8em;color:#ffd98a;opacity:.85;margin-bottom:6px}
.quiz .more{color:var(--clay);font-family:Fredoka;font-weight:600;text-decoration:none}
/* ---------- book page ---------- */
.bookhead{display:flex;gap:26px;align-items:center;max-width:1000px;margin:0 auto;padding:22px 20px 0}
.bookhead img{width:min(190px,34vw);border-radius:14px;box-shadow:0 12px 28px #7a3d1244;transform:rotate(-2deg)}
.bookhead h1{margin:0;color:var(--clay);font-size:clamp(1.6rem,4.6vw,2.6rem);line-height:1.1}
.bookhead p{margin:.4rem 0 0;font-size:1.1rem}
.back{display:inline-block;margin:16px 20px 0;color:var(--earth);font-family:Fredoka;font-weight:600;text-decoration:none;background:#fff8;border-radius:999px;padding:6px 14px}
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;max-width:1000px;margin:24px auto;padding:0 20px 30px}
.story .cover{aspect-ratio:443/560;background-position:center top}
.story .num{position:absolute;top:12px;left:12px;background:var(--sun);color:var(--earth);font-family:Fredoka;font-weight:700;border-radius:999px;width:40px;height:40px;display:grid;place-items:center;font-size:1.2rem;box-shadow:0 3px 0 #0003}
.story .meta{font-size:.92rem;opacity:.75;margin-top:6px}
@media (max-width:560px){.bookhead{flex-direction:column;text-align:center}}
.book.soon .cover{background-size:cover;background-position:center}
.book.soon .cover{filter:saturate(.6)}
.intro{max-width:1000px;margin:18px auto 0;padding:0 20px;display:flex;gap:16px;align-items:center}
.intro p{margin:0;background:#fff9;border-radius:18px;padding:14px 18px;font-size:1.05rem;line-height:1.5}
.btn.small{min-width:120px;height:56px;font-size:1.1rem;flex:none}
@media (max-width:560px){.intro{flex-direction:column}}
@media (max-width:430px){.controls{gap:10px}.btn{padding:0 14px;font-size:1.05rem;white-space:nowrap;min-width:56px;height:58px}.btn.play{min-width:118px;height:64px;font-size:1.25rem}}