:root{--sky:#BFE9FF;--sky2:#E8F7FF;--sun:#FFD23F;--leaf:#5CCB6E;--coral:#FF6B6B;--grape:#7B5CFF;--ink:#2B2D6E}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);font-size:1.15rem;line-height:1.5;
background:linear-gradient(var(--sky),var(--sky2) 60%,#fff);min-height:100vh;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:99px;z-index:99}

/* Lagarta de progresso */
#worm{position:fixed;top:0;left:0;right:0;height:46px;z-index:20;display:flex;align-items:center;padding:0 14px;gap:0;pointer-events:none}
#worm i{width:26px;height:26px;border-radius:50%;background:var(--leaf);border:3px solid var(--ink);margin-right:-7px;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
#worm i.on{transform:scale(1)}
#worm i:nth-child(even){background:#8BE39A}
#worm i.head{background:var(--sun);width:32px;height:32px;margin-left:4px;position:relative}
#worm i.head::after{content:"•  •";position:absolute;inset:6px 0 0;text-align:center;font-style:normal;font-size:12px;line-height:1;letter-spacing:1px}

/* Fundo animado */
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cloud{position:absolute;width:150px;height:50px;background:#fff;border-radius:99px;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:70px;height:70px;left:22px;top:-32px}.cloud::after{width:55px;height:55px;right:24px;top:-22px}
.star{position:absolute;font-size:26px;animation:twinkle 2.4s ease-in-out infinite}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(110vw)}}
@keyframes twinkle{50%{transform:scale(1.4) rotate(20deg);opacity:.6}}

/* Topo */
header{display:flex;justify-content:space-between;align-items:center;padding:60px 5vw 0;gap:12px;flex-wrap:wrap}
.kids-language{position:relative;margin-left:auto;font-size:.9rem}
.kids-language-toggle,.kids-language-menu button{display:flex;align-items:center;gap:8px;border:3px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.kids-language-toggle{padding:8px 12px;box-shadow:0 4px 0 var(--ink)}
.kids-language-toggle img,.kids-language-menu img{width:24px;height:17px;object-fit:cover;border-radius:3px}
.kids-language-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:165px;padding:7px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 6px 0 var(--ink)}
.kids-language-menu.open{display:grid;gap:5px}
.kids-language-menu button{justify-content:flex-start;width:100%;padding:8px 10px;border-width:2px;box-shadow:none}
.kids-language-menu button b{margin-left:auto}
.btn{display:inline-block;text-decoration:none;font:inherit;font-weight:700;border:4px solid var(--ink);border-radius:99px;padding:.6em 1.4em;
background:var(--sun);color:var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn.g{background:var(--leaf)}.btn.c{background:var(--coral);color:#fff}

.hero{text-align:center;padding:30px 5vw 40px}
.hero h1{font-size:clamp(2.6rem,9vw,5.5rem);line-height:1.02;margin:.2em 0 .1em;font-weight:700}
.hero h1 span{display:inline-block;animation:hop 1.6s ease-in-out infinite}
.hero h1 span:nth-child(2n){animation-delay:.2s}.hero h1 span:nth-child(3n){animation-delay:.4s}
.c1{color:var(--coral)}.c2{color:var(--grape)}.c3{color:#F4A300}.c4{color:#25A244}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-4deg)}}
.hero p{max-width:32ch;margin:0 auto 1.2em;font-size:1.35rem}

/* Livros */
h2{font-size:clamp(1.8rem,5vw,2.6rem);text-align:center;margin:0 0 .6em}
section{padding:30px 5vw 50px}
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;max-width:900px;margin:0 auto}
.book{background:#fff;border:4px solid var(--ink);border-radius:32px;padding:22px;text-align:center;box-shadow:0 8px 0 var(--ink)}
.cover{width:170px;height:220px;margin:0 auto 14px;border-radius:18px;border:4px solid var(--ink);display:grid;place-items:center;font-size:84px;
overflow:hidden;animation:sway 3.6s ease-in-out infinite;transform-origin:50% 100%;cursor:pointer}
.cover img{width:100%;height:100%;object-fit:cover}
.book:nth-child(2) .cover{animation-delay:.9s}
.cover:hover,.cover:focus-visible{animation:jump .6s ease}
@keyframes sway{50%{transform:rotate(3deg)}0%,100%{transform:rotate(-3deg)}}
@keyframes jump{30%{transform:translateY(-26px) scale(1.08)}60%{transform:translateY(0) scale(.96)}}
.book h3{margin:.2em 0;font-size:1.5rem}
.collection-label{display:inline-block;margin:.15em 0 .65em!important;padding:.22em .7em;border:2px solid var(--ink);border-radius:99px;background:#fff3b0;font-weight:700;font-size:.92rem}
.book p{margin:.2em 0 1em}
.acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ear{display:inline-block;animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.25)}}

/* Jogo */
#game{max-width:900px;margin:0 auto;text-align:center}
#arena{position:relative;height:340px;border:4px dashed var(--ink);border-radius:32px;background:rgba(255,255,255,.55);overflow:hidden;margin-top:14px;touch-action:manipulation}
.bub{position:absolute;bottom:-90px;width:70px;height:70px;border-radius:50%;border:4px solid var(--ink);cursor:pointer;
display:grid;place-items:center;font-size:30px;padding:0;animation:rise linear forwards}
.bub.pop{animation:pop .3s forwards}
@keyframes rise{to{bottom:370px}}
@keyframes pop{to{transform:scale(1.8);opacity:0}}
#score{font-weight:700;font-size:1.6rem}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:.7em 1.4em;border-radius:99px;transition:transform .3s;z-index:30}
#toast.on{transform:translate(-50%,0)}
footer{text-align:center;padding:20px 5vw 60px;font-size:1rem}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.bub{bottom:auto}
}

/* template extensions */

/* Mesmo visual do kids.html. Se preferir, mova este CSS para /assets/jr-kids.css e use nos dois. */
:root{--sky:#BFE9FF;--sky2:#E8F7FF;--sun:#FFD23F;--leaf:#5CCB6E;--coral:#FF6B6B;--grape:#7B5CFF;--ink:#2B2D6E}
*{box-sizing:border-box}
body{margin:0;font-family:Fredoka,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);font-size:1.15rem;line-height:1.5;background:linear-gradient(var(--sky),var(--sky2) 60%,#fff);min-height:100vh;overflow-x:hidden}
a{color:inherit}:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cloud{position:absolute;width:150px;height:50px;background:#fff;border-radius:99px;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:70px;height:70px;left:22px;top:-32px}.cloud::after{width:55px;height:55px;right:24px;top:-22px}
@keyframes drift{from{transform:translateX(-220px)}to{transform:translateX(110vw)}}
header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:20px 5vw}
.btn{display:inline-block;text-decoration:none;font:inherit;font-weight:700;border:4px solid var(--ink);border-radius:99px;padding:.55em 1.3em;background:var(--sun);color:var(--ink);box-shadow:0 6px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--ink)}.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
.btn.g{background:var(--leaf)}.btn.c{background:var(--coral);color:#fff}.btn.p{background:var(--grape);color:#fff}
main{max-width:1000px;margin:0 auto;padding:0 5vw 60px}
.top{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:34px;align-items:center;margin-bottom:40px}
.top>div{padding:clamp(20px,4vw,36px);background:rgba(255,255,255,.9);border:4px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 rgba(43,45,110,.18)}
.capa{width:100%;aspect-ratio:3/4;object-fit:cover;border:4px solid var(--ink);border-radius:22px;box-shadow:0 10px 0 var(--ink);animation:sway 4s ease-in-out infinite;transform-origin:50% 100%;background:#fff}
@keyframes sway{50%{transform:rotate(2.5deg)}0%,100%{transform:rotate(-2.5deg)}}
h1{font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;margin:.1em 0 .3em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.chips li{background:#fff;border:3px solid var(--ink);border-radius:99px;padding:.1em .8em;font-weight:600;font-size:1rem}
.chips li.age{background:var(--sun)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:1em}
h2{font-size:clamp(1.6rem,4.5vw,2.2rem);margin:0 0 .6em}
section{margin:0 0 46px}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));grid-auto-flow:dense;gap:12px}
.gal button{padding:0;border:4px solid var(--ink);border-radius:20px;overflow:hidden;cursor:zoom-in;background:linear-gradient(135deg,#fff7c7,#dff7ff);aspect-ratio:1;box-shadow:0 6px 0 var(--ink);transition:transform .15s}
.gal button:hover{transform:translateY(-4px) rotate(-1deg)}
.gal img{width:100%;height:100%;object-fit:contain;display:block}
dialog{border:4px solid var(--ink);border-radius:24px;padding:12px;max-width:min(92vw,1000px);background:#fff}
dialog::backdrop{background:rgba(43,45,110,.7)}
dialog img{max-width:100%;max-height:78vh;display:block;margin:0 auto 10px;border-radius:14px}
audio{width:100%;max-width:420px}
.kids-editions{margin-top:1.2rem;padding:14px;border:3px solid var(--ink);border-radius:18px;background:#eefaff}
.kids-editions>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.kids-editions span{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:2px solid #a8afd8;border-radius:99px;background:#fff;opacity:.72;font-size:.88rem;font-weight:700}
.kids-editions span.ready{border-color:var(--leaf);opacity:1}
.kids-editions img{width:22px;height:16px;object-fit:cover;border-radius:2px}
@media(max-width:640px){.top{grid-template-columns:1fr;text-align:center}.capa{max-width:250px;margin:0 auto}.chips,.acts{justify-content:center}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}