/* Mundo de aventuras: cenários reais, leitura em papel e caminhos do jardim.
   Regras e dados permanecem nos renderizadores; esta camada só apresenta o mundo. */
:root {
  --mundo-verde: #14583e; --mundo-musgo: #286747; --mundo-papel: #fff8e9;
  --mundo-ceu: #eaf4e7; --mundo-borda: #dbc89c; --mundo-sombra: #634a1b20;
  --mundo-fundo: #edf2df; --mundo-noite-filtro: none;
}
body {
  background-color: var(--mundo-fundo);
  background-image: radial-gradient(ellipse at 10% 0%, #b9d5a96b, transparent 45%), radial-gradient(ellipse at 90% 25%, #e9bf6850, transparent 42%);
  background-attachment: fixed;
  padding-block-start: 0;
}
.casca { max-width: 640px; gap: 20px; }
#view { gap: 20px; }
.hud { padding: 16px 0 0; flex-wrap: wrap; gap: 10px; }
.brand { color: var(--mundo-verde); gap: 6px; font-size: 26px; line-height: 1; }
.brand svg { width: 28px; height: 32px; }
.brand small { display: block; font: 700 11px var(--body); letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }
.stats { gap: 5px; margin-left: auto; }
.stat { padding: 3px 7px; border: 1px solid var(--mundo-borda); background: var(--surface); font-size: 14px; }
.hud-pais { padding: 4px 9px; border-width: 1px; font-size: 12px; }
.hud-pais svg { width: 18px; height: 18px; }
.mundo-cena { position: relative; margin: 0; overflow: hidden; border-radius: 26px; background: #b9cf9c; isolation: isolate; }
.mundo-cena img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; filter: var(--mundo-noite-filtro); }
.mundo-cena::after { content: ''; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, #16422b35); pointer-events: none; }
.mundo-cena-fundo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #badba3, #e2ecc3 55%, #42724b); }
.mundo-cena-texto { position: relative; background: var(--surface); padding: 16px 20px; }
.mundo-cena-texto .mundo-descricao { margin-top: 8px; }
.brand.mundo-marca { display: flex; }
.hud .brand > span { display: block; }
.mundo-marca small { font-size: 10px; letter-spacing: .09em; }
.mundo-cabecalho { display: grid; gap: 8px; text-align: center; padding: 4px 16px 8px; }
.mundo-rotulo { font: 800 12px var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--tag-text); }
.mundo-titulo { font-size: clamp(28px, 7vw, 38px); line-height: 1.03; }
.mundo-descricao { color: var(--muted); font-size: 15px; max-width: 42ch; margin-inline: auto; }
.card { border: 1px solid var(--mundo-borda); border-radius: 24px; box-shadow: 0 7px 22px var(--mundo-sombra); padding: 20px; }
.card h1 { letter-spacing: -.025em; }
.btn { border-radius: 18px; min-height: 54px; letter-spacing: 0; font-family: var(--display); font-size: 18px; }
.btn-sun { background: linear-gradient(#ffd466, #ffbd39); color: #14245c; box-shadow: 0 4px 0 #bc811e, inset 0 1px 0 #fff5c5; }
.btn-leaf { box-shadow: 0 4px 0 var(--leaf-deep), inset 0 1px 0 #ffffff30; }
.btn-ghost { border: 1px solid var(--mundo-borda); box-shadow: 0 3px 0 var(--line); }
.bottom-nav { left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); max-width: 616px; margin-inline: auto; border: 1px solid var(--mundo-borda); border-radius: 24px; padding: 6px; background: var(--surface); box-shadow: 0 8px 30px #173b2b25; }
.bottom-nav .in { gap: 6px; }
.bottom-nav button { min-height: 58px; border: 0; border-radius: 18px; gap: 3px; }
.bottom-nav button svg { width: 26px; height: 26px; }
.bottom-nav button[aria-current=page] { background: var(--soft-leaf); color: var(--tag-text); box-shadow: inset 0 0 0 1px var(--line); }
.bottom-nav button:focus-visible { outline-offset: -3px; }
/* A entrada chega ao jardim; todos os controles permanecem HTML e funcionam sem a arte. */
.entrada-mode { padding-top: 16px; }
.entrada-mode #view { align-content: start; min-height: 0; }
.entrada { padding: 0 0 24px; gap: 16px; overflow: hidden; }
.entrada > .mundo-cena, .entrada .mundo-boasvindas { border-radius: 0; margin: 0; }
.entrada > :not(.mundo-cena):not(.mundo-boasvindas) { margin-inline: 20px; }
.entrada .mundo-boasvindas .mundo-cena { border-radius: 0; }
.entrada .lesson-top { padding-top: 16px; }
.entrada h1 { font-size: clamp(30px, 8vw, 42px); text-align: center; line-height: 1.05; }
.entrada .nuvem { background: transparent; padding: 0; }
.entrada-promessa { gap: 8px; }
.entrada-promessa li { background: var(--soft-leaf); font-size: 15px; min-height: 44px; padding-block: 6px; }
.entrada .help, #entrada-conta { text-align: center; }
.entrada #entrada-continuar { min-height: 58px; }
/* O dia atual vira convite de aventura, separado do mapa explorável. */
body[data-mundo=jardim] .hero { background: var(--surface); border: 1px solid var(--mundo-borda); position: relative; }
body[data-mundo=jardim] .hero h1 { font-size: 30px; }
body[data-mundo=jardim] .hero .eyebrow { color: var(--tag-text); }
body[data-mundo=jardim] .hero .nuvem { margin-top: 4px; }
.mundo-mapa { padding: 16px 0; min-width: 0; }
.mundo-mapa > .mundo-cena { margin-bottom: 16px; }
.mundo-mapa > .hero { margin-bottom: 20px; }
.mundo-mapa-caminho .week-head { padding: 0 12px 12px; }
.mundo-mapa > h2 { text-align: center; padding: 0 12px 16px; }
.path {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid #b7c294;
  border-radius: 32px; padding: 28px 12px 40px; background: #dbe8c3 url('imagens/mundo/caminho-jardim.webp') center / 100% 100% no-repeat;
  box-shadow: 0 8px 24px var(--mundo-sombra); min-width: 0;
}
.path::before { opacity: 0; }
.path .node-row { position: relative; z-index: 1; min-height: 114px; }
.path .node { width: 72px; height: 66px; border-radius: 28px; border: 3px solid #fffbdf; box-shadow: 0 6px 0 #897b3e, 0 9px 12px #28472138; }
.path .node.next { background: #ffcc47; color: #14245c; box-shadow: 0 6px 0 #ad791d, 0 0 0 8px #fff6b980; }
.path .node.done { background: #277b4a; color: white; box-shadow: 0 6px 0 #16462f; }
.path .node.locked { background: #e2dfca; color: #5a624b; border-color: #f5f1dc; filter: none; opacity: 1; box-shadow: 0 5px 0 #8d9676; }
.path .node-label { background: #fff8e9f5; color: #14245c; padding: 7px 11px; border: 1px solid #d7c695; border-radius: 14px; box-shadow: 0 3px 0 #87652b20; max-width: min(170px, 48vw); }
.path .node-label small { color: #4b5a57; }
.path .node-label strong { font-family: var(--display); font-size: 17px; line-height: 1.15; }
.path .start-tip { background: #14583e; color: white; border-radius: 10px; padding: 5px 9px; font-size: 12px; }
.week-next, .week-later { background: var(--surface); border: 1px dashed var(--mundo-borda); border-radius: 22px; padding: 16px; }
.painel { background: var(--surface); border: 1px solid var(--mundo-borda); border-radius: 18px; padding: 12px 16px; }
.painel > summary { min-height: 48px; }
.painel > summary b { font-family: var(--display); font-size: 19px; }
.bubble { border: 1px solid var(--mundo-borda); background: var(--surface); box-shadow: 0 3px 0 var(--mundo-sombra); }
.sheet, .reward { border: 1px solid var(--mundo-borda); box-shadow: 0 20px 70px #102e3b30; }
.overlay:not(.dim) { background: var(--mundo-fundo); background-image: radial-gradient(ellipse at top, #b9d5a940, transparent 60%); }
/* Mesma coleção de livros, brincadeiras e lugares do jardim. */
body[data-mundo=album] .album-page { border-color: var(--mundo-borda); background: var(--surface); box-shadow: inset 5px 0 0 var(--line), 0 6px 20px var(--mundo-sombra); }
body[data-mundo=album] .album-tabs, body[data-mundo=album] .album-controles { background: var(--surface); border-radius: 18px; }
body[data-mundo=album] #view { gap: 12px; }
body[data-mundo=album] .mundo-cabecalho { padding-block: 0; gap: 4px; }
body[data-mundo=album] .mundo-cabecalho h1 { font-size: 28px; }
body[data-mundo=album] .album-page { padding: 16px; }
body[data-mundo=pais] .card { box-shadow: none; }
body[data-mundo=treino] .card, body[data-mundo=jogos] .game-card { border-top: 5px solid var(--leaf); }
body.lesson-mode { background-color: var(--mundo-fundo); }
.lesson-top { padding: 6px 0; }
.scene { border: 3px solid var(--mundo-borda); border-radius: 24px; overflow: hidden; box-shadow: 0 6px 0 var(--line); }
.scene .hint { background: var(--surface); color: var(--ink); }
.foot { border-top: 1px solid var(--mundo-borda); background: var(--surface); border-radius: 24px 24px 0 0; box-shadow: 0 -6px 20px var(--mundo-sombra); }
.card.sec { border-radius: 22px; box-shadow: 0 6px 0 var(--line); }
.choice { border-radius: 18px; }
/* Recantos: a casa na árvore abriga livros, brincadeiras e o ateliê. */
.mundo-recanto { display: grid; gap: 20px; min-width: 0; }
.mundo-recanto > .mundo-cabecalho { padding-block: 0; }
.mundo-cena-compacta .mundo-cena img { aspect-ratio: 2.7 / 1; object-position: center 38%; }
.mundo-cena-compacta .mundo-cena { border-radius: 24px 24px 12px 12px; }
.mundo-guia { background: var(--surface); padding: 8px 12px; border: 1px solid var(--mundo-borda); border-radius: 20px; }
.nuvem > img { width: 74px; height: 74px; object-fit: contain; flex: none; }
.hero .nuvem > img { width: 60px; height: 60px; }
.entrada .nuvem > img { width: 68px; height: 68px; }
.mate .mundo-retrato { display: block; width: 80px; height: 80px; max-width: 100%; border-radius: 50%; border: 3px solid var(--mundo-borda); background: var(--soft-leaf) url('imagens/mundo/jardim-turma.webp') 25% 34% / 420% auto no-repeat; }
.mate .mundo-retrato-davi { background-position: 52% 34%; }
.mate .mundo-retrato-bento { background-position: 77% 36%; }
.mate .mundo-retrato-nuvem { background-image: url('imagens/mundo/nuvem-guia.webp'); background-size: contain; background-position: center; }
.mundo-recanto .games { gap: 14px; }
.mundo-atividade { position: relative; border: 1px solid var(--mundo-borda); border-top: 5px solid var(--leaf); border-radius: 24px; box-shadow: 0 5px 0 var(--line); gap: 8px; padding: 16px 12px; }
.mundo-atividade-numero { font: 800 11px var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--tag-text); }
.mundo-atividade .mundo-atividade-icone { display: grid; place-items: center; width: 64px; height: 64px; margin-inline: auto; background: var(--soft-leaf); border-radius: 22px; font-size: 36px; }
.mundo-atividade b { font: 800 22px var(--display); line-height: 1.1; }
.mundo-atividade small { font-size: 14px; }
.mundo-atividade-pintar { border-top-color: var(--sec-3-deep); }
.mundo-atividade-pintar .mundo-atividade-icone { background: var(--soft-sun); }
.mundo-atividade-memoria { border-top-color: var(--sec-6-deep); }
.mundo-atividade-memoria .mundo-atividade-icone { background: var(--soft-sky); }
.mundo-atividade-ordem { border-top-color: var(--sec-2-deep); }
.mundo-jogo { display: grid; gap: 16px; }
.mundo-jogo > .mundo-cabecalho { padding: 0; }
.mundo-jogo .mundo-titulo { font-size: 30px; }
.memory { padding: 12px; background: var(--surface); border: 1px solid var(--mundo-borda); border-radius: 26px; }
.mem { border-radius: 20px; background: var(--noite); color: #fff; box-shadow: 0 4px 0 #052347; }
.mem.up, .mem.got { color: var(--ink); }
.habitat { border-color: var(--mundo-borda); border-radius: 24px; background: var(--surface); }
.orderrow { padding: 12px; background: var(--surface); border-radius: 24px; }
.paint-card { border: 1px solid var(--mundo-borda); border-radius: 22px; box-shadow: 0 5px 0 var(--line); transform: rotate(-1deg); }
.paint-card:nth-child(even) { transform: rotate(1deg); }
.paint-card:focus-visible { transform: none; }
.paper { border: 5px solid #d4b77c; border-radius: 16px; box-shadow: 0 12px 32px #3b281b30; }
.paint-tools { border: 1px solid var(--mundo-borda); border-radius: 20px; background: var(--surface); padding: 12px; }
.paint-foot { border-radius: 24px 24px 0 0; box-shadow: 0 -6px 20px var(--mundo-sombra); }
.mundo-aventura { border-radius: 20px; background: var(--surface); padding: 10px 12px; border: 1px solid var(--mundo-borda); }
.mundo-aventura-rotulo { font: 800 12px var(--body); color: var(--tag-text); }
body.lesson-mode .stage { min-width: 0; }
body.lesson-mode .mundo-cabecalho { padding: 0 4px; }
body.lesson-mode .mundo-titulo { font-size: 30px; }
body.lesson-mode .mundo-descricao { font-size: 13px; }
.mundo-leitura { display: grid; gap: 16px; background: var(--surface); border: 1px solid var(--mundo-borda); border-radius: 24px; padding: 20px; box-shadow: inset 5px 0 0 var(--line); }
.mundo-leitura .story { font-size: 18px; line-height: 1.75; }
.mundo-familia { display: grid; gap: 16px; }
.mundo-familia > h2 { text-align: center; }
.mundo-devocional-detalhe { display: grid; gap: 16px; }
.devo-lista { gap: 16px; }
.devo-card { border: 1px solid var(--mundo-borda); border-radius: 20px; padding: 10px; box-shadow: 0 5px 0 var(--line); }
.devo-thumb { max-height: 260px; border-radius: 13px; }
.devo-imagem { border: 4px solid #dbc68e; border-radius: 22px; padding: 6px; background: var(--noite); box-shadow: 0 8px 24px var(--mundo-sombra); }
.vazio { border: 1px dashed var(--mundo-borda); border-radius: 24px; padding: 20px; background: var(--surface); }
@media (min-width: 900px) {
  body:not(.lesson-mode):not(.entrada-mode) { padding-block-start: 16px; }
  .casca { max-width: 720px; }
  .mundo-cena img { max-height: 330px; object-position: center 48%; }
  .entrada { max-width: 560px; margin-inline: auto; width: 100%; }
  .bottom-nav { max-width: 696px; }
}
@media (max-width: 380px) {
  .hud { gap: 6px; }
  .brand { font-size: 23px; }
  .stats { gap: 4px; }
  .stat { font-size: 12px; padding-inline: 5px; }
  .hud-pais { padding-inline: 6px; }
  .hud-pais svg { width: 16px; }
  .card { padding: 16px; }
  .entrada { padding: 0 0 20px; }
  .path { padding-inline: 6px; }
  .path .node-label { max-width: 145px; }
}
@media (prefers-reduced-motion: no-preference) {
  .mundo-cena img { animation: mundo-chegar .45s ease-out both; }
  @keyframes mundo-chegar { from { opacity: .4; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } }
}
/* A noite continua sendo o mesmo jardim; o papel usa os tokens escuros acessíveis. */
:root[data-theme=dark] { --mundo-verde: #a7e5b7; --mundo-borda: #405a69; --mundo-sombra: #00000030; --mundo-fundo: #101f2e; --mundo-noite-filtro: brightness(.79) saturate(.88); }
:root[data-theme=dark] .path { background-color: #344c3c; background-blend-mode: multiply; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) { --mundo-verde: #a7e5b7; --mundo-borda: #405a69; --mundo-sombra: #00000030; --mundo-fundo: #101f2e; --mundo-noite-filtro: brightness(.79) saturate(.88); }
  :root:not([data-theme=light]) .path { background-color: #344c3c; background-blend-mode: multiply; }
}

/* Botões e ícones da coleção: placas de madeira, esmalte dourado e folhas.
   Os pictogramas são SVGs decorativos próprios; os rótulos continuam em HTML. */
.icone-mundo { display: inline-block; width: 32px; height: 32px; flex: none; vertical-align: middle; fill: none; stroke: none; }
.brand img { width: 44px; height: 44px; border-radius: 14px; flex: none; box-shadow: 0 3px 0 #82612230; }
.stat .icone-mundo { width: 22px; height: 22px; }
.hud-pais { border: 2px solid var(--mundo-borda); border-bottom-width: 4px; border-radius: 12px; background: var(--surface); padding: 4px 10px; }
.hud-pais .icone-mundo { width: 30px; height: 30px; stroke: none; fill: none; }
.btn { border: 2px solid transparent; border-radius: 13px 22px 13px 22px; padding: 12px 20px; box-shadow: 0 5px 0 var(--mundo-borda); text-shadow: 0 1px 0 #ffffff25; }
.btn-sun { border-color: #b77b21; background: linear-gradient(180deg, #ffe296 0%, #ffcc55 47%, #f4b735 100%); box-shadow: inset 0 2px 0 #fff5c9, inset 0 -2px 0 #cb8d2230, 0 5px 0 #805b28; color: #14245c; }
.btn-leaf { border-color: var(--leaf-deep); background: linear-gradient(180deg, color-mix(in srgb, var(--leaf) 92%, white), var(--leaf)); box-shadow: inset 0 2px 0 #ffffff50, 0 5px 0 var(--leaf-deep); color: var(--on-leaf); }
.btn-ghost { border: 2px solid var(--mundo-borda); background: linear-gradient(180deg, var(--surface), var(--bg)); box-shadow: inset 0 2px 0 #ffffff25, 0 4px 0 var(--line); color: var(--ink); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 2px 0 #ffffff25, 0 2px 0 var(--mundo-borda); }
.btn:disabled { background: var(--line); border-color: var(--line); color: var(--muted); text-shadow: none; box-shadow: none; }
.btn-mini, .album-seta { border-radius: 12px; }
.album-seta { font-size: 28px; }
.btn-sec { border-color: color-mix(in srgb, var(--sc-deep, var(--sec-4-deep)) 70%, black); background: linear-gradient(color-mix(in srgb, var(--sc-deep, var(--sec-4-deep)) 92%, white), var(--sc-deep, var(--sec-4-deep))); box-shadow: inset 0 2px 0 #ffffff35, 0 4px 0 color-mix(in srgb, var(--sc-deep, var(--sec-4-deep)) 65%, black); color: #fff; }
.seg button { border: 2px solid var(--mundo-borda); border-bottom-width: 4px; border-radius: 12px 18px 12px 18px; background: linear-gradient(var(--surface), var(--bg)); color: var(--ink); font: 700 16px var(--display); padding: 8px 12px; box-shadow: inset 0 1px 0 #ffffff25; }
.seg button[aria-pressed=true] { border-color: var(--leaf); background: var(--soft-leaf); box-shadow: inset 0 2px 0 #ffffff20; }
.chip { border: 2px solid var(--mundo-borda); border-radius: 12px; box-shadow: inset 0 1px 0 #ffffff30, 0 4px 0 var(--line); }
.x { border: 2px solid var(--mundo-borda); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.orderrow button { border-radius: 12px; border-bottom-width: 4px; }
.bottom-nav { border: 2px solid var(--mundo-borda); border-bottom: 5px solid var(--mundo-borda); border-radius: 20px 28px 20px 28px; box-shadow: 0 8px 24px #173b2b25; }
.bottom-nav button { border-radius: 14px; padding: 3px 2px 5px; gap: 0; color: var(--ink); min-height: 64px; }
.bottom-nav button .icone-mundo { width: 40px; height: 40px; stroke: none; fill: none; margin: 0; filter: drop-shadow(0 2px 0 #422d3225); }
.bottom-nav button[aria-current=page] { background: var(--soft-sun); color: var(--ink); box-shadow: inset 0 0 0 2px var(--sun-deep); }
.bottom-nav button[aria-current=page] .icone-mundo { transform: translateY(-2px); }
.painel > summary .pi { display: grid; place-items: center; width: 42px; height: 42px; background: var(--soft-sun); border: 1px solid var(--mundo-borda); border-radius: 12px; }
.painel > summary .pi .icone-mundo { width: 34px; height: 34px; }
.mundo-atividade .mundo-atividade-icone { width: 72px; height: 72px; border: 2px solid var(--mundo-borda); border-bottom-width: 5px; border-radius: 18px; background: var(--surface); }
.mundo-atividade-icone .icone-mundo { width: 54px; height: 54px; }
body[data-mundo=jogos] .mundo-atividade-pintar { border-top-color: var(--sec-3-deep); }
body[data-mundo=jogos] .mundo-atividade-memoria { border-top-color: var(--sec-6-deep); }
body[data-mundo=jogos] .mundo-atividade-ordem { border-top-color: var(--sec-2-deep); }
.choice { border-radius: 13px; border-width: 2px; box-shadow: 0 3px 0 var(--line); }
@media (max-width: 380px) {
  .hud-pais { padding-inline: 6px; }
  .hud-pais .icone-mundo { width: 24px; height: 24px; }
  .stat .icone-mundo { width: 18px; height: 18px; }
  .brand img { width: 36px; height: 36px; }
  .btn { padding-inline: 12px; }
}