@font-face{font-family:Andika;src:url(fonts/Andika-Regular.ttf)}@font-face{font-family:Andika;font-weight:700;src:url(fonts/Andika-Bold.ttf)}
@page{size:148mm 210mm;margin:0}*{box-sizing:border-box}body{margin:0;font-family:Andika,"Segoe UI",sans-serif}
.pg{width:148mm;height:210mm;position:relative;overflow:hidden;background:linear-gradient(#fff,#eef8ec)}
.print .pg{page-break-after:always}
.foot{position:absolute;bottom:3mm;left:0;right:0;text-align:center;font-size:9pt;color:#333}.cover .foot{color:#fff;text-shadow:0 0 3px #000}
.pn{position:absolute;bottom:3mm;right:7mm;font-size:9pt;color:#666}
.body{position:absolute;top:0;left:0;right:0;bottom:29mm;display:flex;flex-direction:column;justify-content:space-evenly;padding-bottom:1mm}
.cover .body,.cert .body{bottom:0;display:block}.story .body{justify-content:flex-start}.story .txt{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.band{position:absolute;bottom:9mm;left:7mm;right:7mm;height:18mm;display:flex;align-items:center;gap:3mm;background:#fffbe6;border:0.6mm solid #ffd23f;border-radius:9mm;padding:0 5mm 0 2mm;font-size:12pt;color:#1f6b3a;font-weight:700}
.band img{height:15mm;mix-blend-mode:multiply}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctop{position:absolute;top:8mm;left:0;right:0;text-align:center}
.logo{font-weight:700;font-size:30pt;line-height:1}.logo span{-webkit-text-stroke:1.5px #fff;paint-order:stroke fill;text-shadow:0 3px 0 #0006}
.r{color:#e8362f}.y{color:#ffd23f}.tag{font-size:10pt;color:#fff;margin-top:2mm;letter-spacing:1px}
.title{margin-top:5mm;font-size:34pt;font-weight:700;color:#fff;text-shadow:0 3px 0 #1f8a4c,0 0 8px #000}
.sub{margin-top:2mm;font-size:13pt;color:#ffd23f;font-weight:700;text-shadow:0 0 4px #000}
.cbtm{position:absolute;bottom:12mm;left:18mm;right:18mm}.cbtm .say{background:#fffbe6ee}
.h{text-align:center;font-weight:700;font-size:21pt;color:#1f6b3a;margin:5mm 4mm 0}
.ins{margin:2mm 8mm;font-size:12.5pt}.c{text-align:center}
b.a{color:#d62828}
.say{display:flex;align-items:center;justify-content:space-between;gap:2mm;background:#fff;border:0.6mm solid #d1e9cc;border-radius:4mm;padding:1.4mm 2mm 1.4mm 3mm;margin:1.4mm 0;font-size:13.5pt;line-height:1.2}
.btns{display:flex;gap:1.2mm;flex-shrink:0}
.b{width:10mm;height:10mm;border-radius:50%;border:none;font-size:13pt;cursor:pointer;box-shadow:0 1mm 0 #0003;padding:0;font-family:inherit}
.play{background:#ffd23f}.rec{background:#ff8a80}.mine{background:#9be7a0;color:#14532d}
.rec.on{background:#e8362f;animation:pulse 1s infinite}.mine:disabled{opacity:.35}
.say{transition:transform .15s,box-shadow .15s}.say.playing{border-color:#ffb400!important;background:#fff3b0!important;transform:scale(1.03);box-shadow:0 0 0 1.2mm #ffd23f88}.say.playing .t{color:#1d2a80}.say.done .play{box-shadow:0 0 0 .7mm #2fb344}
@keyframes pulse{50%{transform:scale(1.15)}}
.print .btns{display:none}.print .say{justify-content:flex-start}.print .say:before{content:"🗣";margin-right:2mm}
.chars{display:flex;gap:2mm;margin:0 5mm}.ch{flex:1;text-align:center;background:#eef8ec;border-radius:5mm;padding:2mm}
.ch img{height:58mm;max-width:100%;object-fit:contain}.nm{font-weight:700;font-size:13pt;color:#e8362f}.ch .say{flex-direction:column;font-size:11pt;padding:1.5mm}
.sound{margin:4mm 8mm 0;padding:3mm;border:1mm solid #ffd23f;border-radius:5mm;text-align:center;font-size:14pt;background:#fffbe6}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:3mm;margin:3mm 8mm}
.wc{background:#fff;border:0.7mm solid #1f6b3a;border-radius:5mm;text-align:center;padding:2mm}.wc .em{font-size:36pt;line-height:1.2}
.wc .say,.mp .say{flex-direction:column;border:none;font-size:20pt;font-weight:700;margin:0;padding:0}
.story .pic{width:100%;height:96mm;object-fit:cover;display:block}
.st{font-weight:700;font-size:17pt;color:#1f6b3a;margin:2mm 7mm 0}.st span{display:block;font-size:9.5pt;color:#e8362f;letter-spacing:1px;text-transform:uppercase}.txt{margin:0 7mm}.txt .say{font-size:16pt;margin:0}
.pic2{display:block;width:126mm;height:66mm;object-fit:cover;margin:0 auto;border-radius:5mm}
.qa{margin:2mm 7mm}.q,.ans{display:flex;align-items:center;gap:1mm;font-size:13pt}.q .say,.ans .say{flex:1;margin:1.5mm 0;font-size:14pt}.q .say{background:#eaf7ea}.ans{margin-left:6mm}.ans .say{background:#fffbe6;font-size:12.5pt}
.cast{display:flex;align-items:center;justify-content:center;gap:3mm;font-size:12pt}.cast img{height:30mm}
.dlg{margin:1mm 7mm}.dl{display:flex;align-items:center;gap:2mm}.dl .say{flex:1;font-size:14pt;margin:2mm 0}.who{width:12mm;font-weight:700}.dl.j .who{color:#e8362f}.dl.g .who{color:#7b3fbf}.dl.j .say{background:#fff1f0}.dl.g .say{background:#f5ecff}
.big{margin:3mm 7mm}.big .say{font-size:18pt;margin:3mm 0}
.chant{margin:4mm 8mm}.chant .say{font-size:17pt;background:#fffbe6;margin:3mm 0}
.mp{margin:2mm 7mm}.pair{display:flex;align-items:center;gap:2mm;margin:2mm 0}.pair>div:not(.vs){flex:1;display:flex;align-items:center;gap:2mm;border-radius:4mm;padding:1.5mm 3mm}
.mw1{background:#fff1f0;border:0.6mm solid #e8362f}.mw2{background:#eef8ec;border:0.6mm solid #1f6b3a}.mp .em{font-size:22pt}.mp .say{flex:1;font-size:17pt;flex-direction:row}.vs{font-weight:700;color:#666}
.pairs>.say{margin:1mm 7mm;font-size:11pt}
.frame{margin:2mm 8mm;padding:2mm 3mm;border:1mm dashed #e8362f;border-radius:5mm;background:#fffbe6}
.cert{background:radial-gradient(#fffbe6,#ffe98a)}.certb{position:absolute;inset:7mm 7mm 12mm;border:2mm double #e8362f;border-radius:6mm;text-align:center;padding:4mm 6mm;background:#fff}
.star{font-size:40pt;color:#ffd23f;-webkit-text-stroke:1px #c90}.ct{font-weight:700;font-size:23pt;color:#e8362f}.cs{font-size:13pt;color:#1f6b3a;font-weight:700}
.cn{font-size:13pt;margin-top:4mm}.line{border-bottom:0.5mm solid #333;height:12mm;margin:0 10mm}.cimgs img{height:42mm;margin:3mm 1mm 0}.sig{margin-top:3mm;font-size:11pt}
/* ebook */
.ebook{background:#0b2b18;height:100vh;overflow:hidden}
#stage{position:absolute;inset:0 0 70px 0;display:flex;align-items:center;justify-content:center}
#book{transform-origin:center center}.ebook .pg{display:none;box-shadow:0 0 30px #000;border-radius:3mm}.ebook .pg.cur{display:block;animation:turn .25s ease-out}
@keyframes turn{from{transform:perspective(900px) rotateY(-25deg);opacity:.3}}
#nav{position:fixed;bottom:0;left:0;right:0;height:70px;display:flex;align-items:center;justify-content:center;gap:24px;color:#fff;font:700 20px Andika}
#nav button{width:110px;height:54px;border-radius:27px;border:none;background:#ffd23f;font-size:26px;cursor:pointer;box-shadow:0 4px 0 #c90}#nav button:disabled{opacity:.35}#mute{width:64px!important;background:#9be7a0!important;box-shadow:0 4px 0 #2a8!important}#mute.off{background:#ccc!important}
#next.go{animation:pulse 1s infinite;background:#7ee081;box-shadow:0 4px 0 #2a8}#hint{position:absolute;right:calc(50% - 300px);color:#7ee081;opacity:0;transition:opacity .3s}#hint.on{opacity:1}
.say.practised{border-color:#ffd23f}.say.practised .t:after{content:' ⭐'}

/* Five-line reading-book story pages: compact text, unchanged A5 frame. */
.story .txt .say{font-size:12.5pt;padding:1mm 1.5mm 1mm 2mm;line-height:1.15}.story .st{font-size:16pt}

/* Keep all six picture-talk rows clear of the tip band. */
.talk .pic2{height:58mm}

#download-book{position:fixed;top:6px;right:10px;z-index:10;display:block;max-width:calc(100% - 20px);padding:6px 16px;border-radius:22px;background:#ffd23f;color:#0b1035;font:700 16px/24px Andika,"Segoe UI",sans-serif;text-decoration:none;box-shadow:0 3px 0 #c90;white-space:nowrap}
#download-book:hover{background:#ffe277}
#download-book:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:360px){#download-book{font-size:14px;padding-inline:12px}}
@media print{#download-book{display:none}}