:root {
  --amarelo: #ffc91f;
  --laranja: #f26a1b;
  --mel: #fff3cf;
  --terra: #6b3e1e;
  --verde: #4f9d3a;
  --tinta: #4a2a10;
  --ceu-a: #8fd3ff;
  --ceu-b: #fff0b8;
}
body[data-momento="tarde"] { --ceu-a: #ffb45e; --ceu-b: #ffe9a8; }
body[data-momento="noite"] { --ceu-a: #2b2a66; --ceu-b: #c96a7a; }
body[data-momento="dormir"] { --ceu-a: #0d0c2b; --ceu-b: #1c1a4a; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Baloo 2", "Nunito", "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--tinta);
  background: linear-gradient(var(--ceu-a), var(--ceu-b)) fixed;
  display: flex; flex-direction: column;
  transition: background 1s;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
h1, h2, h3, p { margin: 0; }

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
}
.marca { font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 2px 0 rgba(74,42,16,.45); }
.mini-necka { width: 12px; height: 30px; border-radius: 2px; background: repeating-linear-gradient(var(--laranja) 0 6px, var(--amarelo) 6px 12px); box-shadow: 0 2px 0 rgba(74,42,16,.35); }
.redondo { width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 1.2rem; box-shadow: 0 3px 0 rgba(74,42,16,.25); }

main { flex: 1; overflow-y: auto; padding: 4px 16px 24px; }
section { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
section[hidden] { display: none; }

nav { display: flex; background: #fff; border-top: 4px solid var(--amarelo); padding-bottom: env(safe-area-inset-bottom); }
nav button { flex: 1; background: none; padding: 8px 2px 10px; font-size: .8rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; opacity: .55; }
nav button b { font-size: 1.5rem; font-weight: 400; }
nav button.ativo { opacity: 1; color: var(--laranja); }

/* Peça de montar: todo cartão é um bloco com pinos em cima */
.bloco {
  position: relative; background: var(--mel); border-radius: 14px; padding: 18px;
  box-shadow: 0 6px 0 rgba(74,42,16,.22); margin-top: 8px;
}
.bloco::before {
  content: ""; position: absolute; left: 22px; top: -8px; width: 112px; height: 8px;
  background: linear-gradient(90deg, var(--mel) 0 24px, transparent 24px 40px) 0 0 / 40px 8px repeat-x;
  border-radius: 4px 4px 0 0;
}
.bloco.sol { background: var(--amarelo); }
.bloco.sol::before { background-image: linear-gradient(90deg, var(--amarelo) 0 24px, transparent 24px 40px); }

.botao {
  background: var(--laranja); color: #fff; font-weight: 800; font-size: 1.15rem;
  padding: 14px 22px; border-radius: 14px; box-shadow: 0 5px 0 #a8430a; min-height: 52px;
}
.botao:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8430a; }
.botao.claro { background: #fff; color: var(--tinta); box-shadow: 0 5px 0 rgba(74,42,16,.25); }
.voltar { align-self: flex-start; background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; box-shadow: 0 3px 0 rgba(74,42,16,.25); }
.linha { display: flex; gap: 12px; flex-wrap: wrap; }

/* Necka que fala */
.fala { display: flex; gap: 16px; align-items: flex-end; }
.necka { flex: none; width: 30px; height: 96px; margin: 26px 0 0 26px; position: relative; border-radius: 3px;
  background: repeating-linear-gradient(var(--laranja) 0 16px, var(--amarelo) 16px 32px);
  box-shadow: 0 4px 0 rgba(74,42,16,.3); animation: respira 4s ease-in-out infinite; transform-origin: bottom; }
.necka::before { content: ""; position: absolute; left: -24px; top: -20px; width: 54px; height: 22px; background: var(--amarelo); border-radius: 4px 10px 2px 2px; box-shadow: inset 0 -4px 0 rgba(242,106,27,.35); }
.necka::after { content: ""; position: absolute; left: 12px; top: -16px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 25%, #fff 4.5px, var(--tinta) 5px 6px, #fff 6.5px); }
@keyframes respira { 50% { transform: scaleY(1.05); } }
.balao { background: #fff; border-radius: 18px 18px 18px 4px; padding: 14px 18px; font-size: 1.2rem; font-weight: 700; line-height: 1.35; box-shadow: 0 4px 0 rgba(74,42,16,.18); }

/* Como está sua luz */
.luzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.luzes button { background: #fff; border-radius: 14px; padding: 10px 4px; font-weight: 700; font-size: .9rem; box-shadow: 0 4px 0 rgba(74,42,16,.2); }
.luzes button b { display: block; font-size: 2rem; font-weight: 400; }
.luzes button.escolhida { background: var(--amarelo); }

/* Cartões do dia */
.momentos { display: grid; gap: 14px; }
.momento { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; }
.momento .icone { font-size: 2.2rem; width: 60px; height: 60px; flex: none; display: grid; place-items: center; background: #fff; border-radius: 12px; }
.momento small { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--laranja); }
.momento h3 { font-size: 1.2rem; line-height: 1.2; }
.momento .feito { margin-left: auto; font-size: 1.6rem; }
.momento.agora { outline: 4px solid var(--laranja); }

/* Prática */
.cena { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--amarelo) center / cover; box-shadow: 0 6px 0 rgba(74,42,16,.22); }
.cena video { width: 100%; height: 100%; object-fit: cover; display: block; }
.passos { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: p; }
.passos li { counter-increment: p; display: flex; gap: 12px; align-items: center; font-size: 1.1rem; font-weight: 600; }
.passos li::before { content: counter(p); flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--laranja); color: #fff; display: grid; place-items: center; font-weight: 800; }
.espera { text-align: center; display: grid; gap: 14px; justify-items: center; }
.relogio { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800;
  background: radial-gradient(#fff 58%, transparent 59%), conic-gradient(var(--laranja) var(--p, 0%), #ffe7a3 0); }
.grande { font-size: 1.5rem; font-weight: 800; line-height: 1.25; }

/* Respirar */
.sopro { height: 300px; display: grid; place-items: center; }
.sopro i { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; font-style: normal;
  background: radial-gradient(#fff6c9, var(--amarelo)); box-shadow: 0 0 0 16px rgba(255,255,255,.35), 0 0 60px #fff;
  transition: transform 4s ease-in-out; }
.sopro i.cheio { transform: scale(2); }

/* Momento Yoga */
.pontos { display: flex; gap: 6px; justify-content: center; }
.pontos i { width: 22px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.6); }
.pontos i.ja { background: var(--amarelo); }
.pontos i.aqui { background: var(--laranja); }
.postura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postura .provisorio { display: none; }
.postura.falta img { display: none; }
.postura.falta .provisorio { display: grid; place-content: center; text-align: center; height: 100%; background: repeating-linear-gradient(45deg, #ffd65a 0 24px, var(--amarelo) 24px 48px); }
.provisorio b { font-size: 6rem; font-weight: 400; line-height: 1.1; }
.provisorio small { font-weight: 700; opacity: .7; }
.nome-postura { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nome-postura h2 { font-size: 1.9rem; color: #fff; text-shadow: 0 3px 0 rgba(74,42,16,.45); }
.relogio.pequeno { width: 72px; height: 72px; font-size: 1.5rem; flex: none; }

/* Ateliê */
.pecas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.peca { text-align: center; padding: 16px 10px; width: 100%; }
.peca b { display: block; font-size: 2.6rem; font-weight: 400; }
.peca span { display: block; font-weight: 800; line-height: 1.2; }
.peca small { font-weight: 700; color: var(--laranja); }
.peca.breve { opacity: .6; }
.peca.breve b { filter: grayscale(1) brightness(.5); }
.material { margin: 0; padding-left: 20px; font-weight: 600; line-height: 1.6; }
.aviso { font-size: .95rem; font-weight: 600; background: #fff; border-left: 6px solid var(--laranja); border-radius: 8px; padding: 10px 14px; }

/* Jardim: girassóis de bloquinho */
.canteiro { display: flex; flex-wrap: wrap; gap: 30px 44px; padding: 24px 24px 10px; min-height: 90px; border-bottom: 10px solid var(--verde); }
.gira { width: 12px; height: 12px; background: var(--terra); position: relative; margin-bottom: 26px;
  box-shadow: 12px 0 var(--amarelo), -12px 0 var(--amarelo), 0 12px var(--amarelo), 0 -12px var(--amarelo),
              12px 12px #ffb000, -12px 12px #ffb000, 12px -12px #ffb000, -12px -12px #ffb000; animation: nasce .5s backwards; }
.gira::after { content: ""; position: absolute; left: 3px; top: 24px; width: 6px; height: 26px; background: var(--verde); }
@keyframes nasce { from { transform: scale(0); } }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; font-weight: 700; }
.calendario span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.6); font-size: .9rem; }
.calendario span.luz { background: var(--amarelo); box-shadow: 0 3px 0 #d99a00; }
.calendario span.hoje { outline: 3px solid var(--laranja); }
.calendario span.vazio { background: none; }
.marcos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-weight: 700; }
.marcos li { opacity: .45; }
.marcos li.ok { opacity: 1; }

.clipe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; background: #000; box-shadow: 0 6px 0 rgba(74,42,16,.22); }
.rodape { text-align: center; }
.rodape button { background: none; text-decoration: underline; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

@media (prefers-reduced-motion: reduce) { .necka, .gira { animation: none; } }

/* Sons do Planeta Solar */
.titulo-claro { color: #fff; text-shadow: 0 2px 0 rgba(74,42,16,.45); align-self: center; }
.chip { background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; box-shadow: 0 3px 0 rgba(74,42,16,.25); }
.chip.ativo { background: var(--laranja); color: #fff; }
.momento .desc { display: block; font-size: .92rem; font-weight: 600; opacity: .8; }
.momento.breve { opacity: .55; }

/* Presente do dia e recadinho da Necka */
.presente { width: 100%; display: grid; gap: 4px; justify-items: center; text-align: center; }
.presente small { font-weight: 700; }
.caixa { font-size: 4rem; font-weight: 400; animation: pula 1.6s ease-in-out infinite; }
@keyframes pula { 50% { transform: translateY(-8px) rotate(-6deg); } }
.recado small { font-weight: 800; color: var(--laranja); }
.recado.abrindo { animation: nasce .5s; }
.recado-texto { margin-top: 8px; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
.frase { margin: 12px 0; text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--laranja); }
.missao { background: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 600; line-height: 1.4; }
.ganhou { margin: 12px 0 4px; font-weight: 700; }
.recado .linha { margin-top: 12px; }
.recado .botao { font-size: 1rem; padding: 10px 16px; min-height: 46px; }
.botao:disabled { background: var(--verde); box-shadow: 0 5px 0 #2f6b22; }

/* Vila Solar */
.vila { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.peca-vila { aspect-ratio: 1; display: grid; place-items: center; font-size: 1.6rem; background: var(--amarelo); border-radius: 6px; box-shadow: 0 3px 0 #d99a00; }
.peca-vila.vazia { background: radial-gradient(circle, rgba(255,255,255,.75) 26%, transparent 28%) center / 50% 50%, rgba(107,62,30,.08); box-shadow: none; }
.dica-vila { margin-top: 10px; font-weight: 600; }
.sua-vez { min-height: 1.6em; text-align: center; font-size: 1.25rem; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(74,42,16,.45); }

/* Meditação */
.barra { height: 10px; border-radius: 5px; background: rgba(255,255,255,.6); overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: var(--laranja); transition: width 1s; }
.medita video { filter: brightness(.7) saturate(.9); }
.medita .luz { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: radial-gradient(#fffbe0, rgba(255,201,31,.85) 55%, rgba(255,201,31,0) 72%); transform: scale(.5); transition: transform 6s ease-in-out; }
/* Hora de dormir: tudo escurece para não acordar a criança */
body[data-momento="dormir"] header, body[data-momento="dormir"] nav { opacity: .15; }
body[data-momento="dormir"] .medita video { filter: brightness(.25) saturate(.5) hue-rotate(200deg); }
body[data-momento="dormir"] .balao { background: #25235a; color: #e9e4ff; box-shadow: none; }
body[data-momento="dormir"] .botao.claro { background: #25235a; color: #b9b3e6; box-shadow: none; }
body[data-momento="dormir"] .barra { opacity: .3; }
.boa-noite { text-align: center; font-size: 1.6rem; font-weight: 700; color: #8f89c9; margin-top: 30vh; line-height: 1.8; }

/* Miniatura da cena em cada cartão do cantinho da calma */
.peca img.mini { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.peca img.mini + b { display: none; }

/* Cenas com imagem (e vídeo opcional por cima) */
.cena img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cena img + video { position: absolute; inset: 0; }
section > h2 { color: #fff; text-shadow: 0 2px 0 rgba(74,42,16,.45); }

/* Quando existir midia/necka.webp ou .webp (Necka de corpo inteiro, fundo transparente), ela substitui a Necka de CSS */
.tem-necka .necka { width: 86px; height: 130px; margin: 0; scale: -1 1; /* virada para o balão */ border-radius: 0; box-shadow: none; background: var(--foto-necka) bottom center / contain no-repeat; }
.tem-necka .necka::before, .tem-necka .necka::after { display: none; }

/* Lojinha do Sol */
.saldo { background: #fff; border-radius: 999px; padding: 0 14px; height: 44px; font-weight: 800; box-shadow: 0 3px 0 rgba(74,42,16,.25); }
.saldo-grande { text-align: center; font-size: 1.2rem; color: #fff; text-shadow: 0 2px 0 rgba(74,42,16,.45); }
.abas { justify-content: center; }
.item { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 14px 10px; }
.item b { font-size: 2.4rem; font-weight: 400; }
.item span { font-weight: 800; line-height: 1.2; }
.item .desc { font-size: .85rem; font-weight: 600; opacity: .75; }
.item .ok { font-weight: 800; color: var(--verde); }
.item img.mini { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.item img.mini + b { display: none; }
.amostra { width: 100%; height: 22px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(74,42,16,.15); }
.chip:disabled { opacity: .45; }
.acessorio { position: absolute; left: -14px; top: -44px; font-size: 1.7rem; font-style: normal; z-index: 1; }
.tem-necka .acessorio { left: 6px; top: -10px; }
body.na-yoga { background: var(--fundo-pratica) fixed; }
.tapete { height: 22px; margin: -8px 24px 0; border-radius: 0 0 14px 14px; box-shadow: 0 4px 0 rgba(74,42,16,.2); }
.bancada .grande { margin: 8px 0 12px; font-size: 2rem; letter-spacing: 4px; }

/* Cartão-presente */
.cartao { width: 100%; max-width: 420px; align-self: center; border-radius: 14px; box-shadow: 0 6px 0 rgba(74,42,16,.22); }
.campo { font: inherit; font-size: 1.1rem; padding: 10px 14px; border-radius: 10px; border: 3px solid var(--amarelo); width: 100%; margin-top: 6px; }
.mensagens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
label.botao { display: inline-flex; align-items: center; }

/* Responsivo: celular pequeno, celular deitado e iPad */
header { gap: 8px; }
header .linha { flex-wrap: nowrap; gap: 8px; flex: none; }
.marca { min-width: 0; font-size: clamp(.95rem, 4.2vw, 1.15rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 360px) {
  .redondo { width: 40px; height: 40px; }
  .saldo { height: 40px; padding: 0 10px; }
  main { padding: 4px 12px 20px; }
}
/* celular deitado: telas baixas, cenas menores para caber sem esconder os botões */
@media (max-height: 500px) and (orientation: landscape) {
  header { padding: 6px 16px; }
  nav button { padding: 4px 2px 6px; flex-direction: row; justify-content: center; gap: 6px; }
  nav button b { font-size: 1.2rem; }
  .cena, .clipe { width: min(100%, calc(52vh * 16 / 9)); align-self: center; }
  .sopro { height: 200px; }
}
/* iPad e telas grandes: aproveita mais a largura */
@media (min-width: 900px) {
  section { max-width: 860px; }
  .balao { font-size: 1.35rem; }
  .pecas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* iPad em pé e deitado: letras e botões um pouco maiores para os dedinhos */
@media (min-width: 700px) and (min-height: 700px) {
  html { font-size: 18px; }
  .redondo { width: 50px; height: 50px; }
  .saldo { height: 50px; }
}

/* Recadinho em etapas: 1 dizer a frase, 2 missão, 🎁 peça da Vila */
.recado-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.etapa { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 2px dashed rgba(242,106,27,.3); }
.etapa .num { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--laranja); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; }
.etapa > div { flex: 1; display: grid; gap: 6px; justify-items: start; }
.etapa .frase { margin: 2px 0 0; text-align: left; }
.etapa .missao { margin: 0; width: 100%; }
.explica { font-weight: 600; opacity: .8; line-height: 1.35; }
.ganhou .num { background: var(--amarelo); }
.peca-hoje { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; margin: 0; }
.peca-hoje .peca-vila { width: 48px; }
.recado .explica { color: var(--tinta); }

/* Clareza para a criança: voltar no topo, como ganhar girassóis */
.topo-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.voltar-topo { font-size: 1.4rem; font-weight: 800; flex: none; }
.voltar-topo[hidden] { display: none; }
.titulo-dia { margin-top: 6px; }
.explica-dia { margin: -8px 0 0; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(74,42,16,.5); line-height: 1.35; }
.como-ganhar .formas { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.como-ganhar .formas button { background: #fff; border-radius: 12px; padding: 10px 6px; font-weight: 700; font-size: .9rem; box-shadow: 0 3px 0 rgba(74,42,16,.18); }
.como-ganhar .formas b { display: block; font-size: 1.6rem; font-weight: 400; }
.ganhos { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.4; font-weight: 600; }
.link { background: none; padding: 0; color: var(--laranja); font-weight: 800; text-decoration: underline; }