:root {
  --verde: #1F5E3A; --verde-escuro: #174A2D; --lima: #C9E265; --rosa: #CC2878; --creme: #F6F1E7; --marrom: #231B06;
  --texto: #231B06; --texto-2: #5A5141; --texto-3: #8B8273; --borda: #E3DCCF; --branco: #fff; --fundo: #F1EEE6;
  --raio: 16px; --sombra: 0 6px 20px rgba(35, 27, 6, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fundo); color: var(--texto); font-family: Figtree, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; background: var(--fundo); position: relative; }
.tela { min-height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }
.sutil { color: var(--texto-3); font-size: 13px; line-height: 1.35; }
.erro { color: var(--rosa); font-size: 13px; }
h1 { font-size: 26px; line-height: 1.1; margin: 0 0 6px; font-weight: 800; color: var(--verde); letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0; font-weight: 700; }
.logo { font-weight: 800; color: var(--verde); letter-spacing: -.01em; font-size: 18px; }
.logo.pequeno { font-size: 16px; }

/* portão */
.portao { align-items: center; justify-content: center; padding: 24px; background: var(--verde); }
.portao-caixa { background: var(--branco); border-radius: 20px; padding: 24px; width: 100%; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.portao label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto-2); font-weight: 600; }
input, select { font: inherit; padding: 12px 14px; border: 1.5px solid var(--borda); border-radius: 12px; background: var(--branco); color: var(--texto); width: 100%; }
input:focus, select:focus { outline: 2px solid var(--lima); border-color: var(--verde); }

/* botões */
.btn { border: 1.5px solid var(--borda); background: var(--branco); color: var(--texto); border-radius: 999px; padding: 12px 18px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn.primario { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.btn.grande { padding: 15px 20px; font-size: 16px; width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--verde); font-weight: 700; font-size: 13px; padding: 0; }

/* topo */
.topo-simples { padding: 18px 20px 0; }
.topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(241, 238, 230, .92); backdrop-filter: blur(8px); }
.topo-dir { display: flex; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: var(--branco); border: 1.5px solid var(--borda); border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.pill.patinhas { border-color: var(--lima); background: #F5FAD9; }
.pill b { font-variant-numeric: tabular-nums; }
.pill.pulsa { animation: pulsa .5s ease; }
@keyframes pulsa { 0% { transform: scale(1); } 40% { transform: scale(1.25); background: var(--lima); } 100% { transform: scale(1); } }

.conteudo { padding: 12px 16px 96px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
#inicio .conteudo { padding-bottom: 24px; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--texto-2); }

/* cão */
.cao-palco { display: flex; justify-content: center; padding: 6px 0 0; }
.cao { filter: drop-shadow(0 8px 10px rgba(35, 27, 6, .15)); }
.cao .rabo { transform-origin: 156px 160px; animation: rabo 1.2s ease-in-out infinite; }
.cao.feliz .rabo { animation-duration: .35s; }
@keyframes rabo { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-18deg); } }
.cao .cabeca { transform-origin: 100px 110px; animation: respira 3s ease-in-out infinite; }
.cao.feliz .cabeca { animation: pula .5s ease-in-out infinite; }
@keyframes respira { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2px) rotate(-1.5deg); } }
@keyframes pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cao .lingua { transform-origin: 100px 92px; animation: lingua 2.6s ease-in-out infinite; }
@keyframes lingua { 0%, 70%, 100% { transform: scaleY(0); } 80%, 90% { transform: scaleY(1); } }
.cao .olhos { animation: pisca 4s infinite; transform-origin: 100px 64px; }
@keyframes pisca { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* chips */
.linha-chips { display: flex; flex-direction: column; gap: 8px; }
.grupo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-3); }
.grupo > span { width: 56px; flex-shrink: 0; font-weight: 600; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1.5px solid var(--borda); background: var(--branco); border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.chips button.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }
.chips.cores button { width: 26px; height: 26px; padding: 0; border-radius: 50%; border-width: 2px; }
.chips.cores button.ativo { outline: 2px solid var(--verde); outline-offset: 2px; }

/* quintal */
.quintal { position: relative; height: 300px; border-radius: 20px; overflow: hidden; box-shadow: var(--sombra); background: #CDE8F6; }
.quintal .ceu { position: absolute; inset: 0 0 42% 0; background: linear-gradient(#BFE3F7, #E9F6FD); }
.quintal .ceu::after { content: ''; position: absolute; right: 22px; top: 18px; width: 44px; height: 44px; border-radius: 50%; background: #FFE58A; box-shadow: 0 0 30px #FFE58A; }
.quintal .grama { position: absolute; inset: 58% 0 0 0; background: radial-gradient(ellipse at 50% 0, #9ACB5A 0, #7FB24A 55%, #6AA23E 100%); }
.quintal .grama::before { content: ''; position: absolute; left: -10%; right: -10%; top: -26px; height: 52px; border-radius: 50%; background: #9ACB5A; }
.cao-no-quintal { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); transition: left .9s cubic-bezier(.4, .1, .3, 1); }
.cao-no-quintal .cao { width: 150px; height: 158px; }
.itens { position: absolute; inset: 0; pointer-events: none; }
.item { position: absolute; font-size: 38px; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); transform-origin: bottom center; animation: aparece .5s ease both; }
@keyframes aparece { from { transform: scale(0); } 70% { transform: scale(1.15); } to { transform: scale(1); } }
.balao { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); background: #fff; border-radius: 14px; padding: 8px 12px; font-size: 13px; font-weight: 600; box-shadow: var(--sombra); max-width: 85%; text-align: center; }
.balao::after { content: ''; position: absolute; left: 50%; bottom: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); }

.bau-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bau { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--borda); background: var(--branco); border-radius: 14px; padding: 10px 12px; text-align: left; }
.bau b { display: block; font-size: 14px; }
.bau small { color: var(--texto-3); font-size: 12px; }
.bau-icone { font-size: 28px; animation: balanca 2.4s ease-in-out infinite; }
.bau.aberto .bau-icone { animation: none; opacity: .5; }
@keyframes balanca { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }

/* cartões */
.cartao { background: var(--branco); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px; }
.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sutil-caixa { background: var(--creme); box-shadow: none; }
.selo { background: var(--creme); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--texto-2); }

/* barras */
.barra { height: 10px; background: var(--fundo); border-radius: 999px; overflow: hidden; }
.barra.grande { height: 16px; }
.barra > div { height: 100%; background: linear-gradient(90deg, var(--lima), #8CC63F); border-radius: 999px; width: 0; transition: width .8s ease; min-width: 10%; }
.barra-legenda { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-3); }
.meta-proxima { font-size: 13px; }
.meta-proxima b { color: var(--verde); }

/* loja */
.loja { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.loja button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1.5px solid var(--borda); background: var(--fundo); border-radius: 12px; padding: 8px 4px; font-size: 11px; font-weight: 600; color: var(--texto-2); }
.loja button span { font-size: 26px; }
.loja button.tem { border-color: var(--lima); background: #F5FAD9; }
.loja button[disabled] { opacity: .45; }
.loja button.novo::after { content: 'novo'; background: var(--rosa); color: #fff; font-size: 9px; border-radius: 999px; padding: 1px 6px; }

/* tabuleiro */
.tabuleiro-caixa { display: flex; justify-content: center; }
.tabuleiro { display: grid; gap: 4px; background: #7FB24A; padding: 8px; border-radius: 16px; width: 100%; max-width: 340px; aspect-ratio: 1; }
.peca { position: relative; border-radius: 10px; background: #9ACB5A; border: 0; padding: 0; transition: transform .18s ease, background .3s; overflow: hidden; }
.peca svg { width: 100%; height: 100%; display: block; }
.peca .caminho { stroke: #C9A96E; stroke-width: 28; fill: none; stroke-linecap: round; }
.peca.ligada .caminho { stroke: #E9C98A; }
.peca.inicio { background: #B9DD86; }
.peca.fim { background: #B9DD86; }
.peca .marcador { font-size: 28px; }
.tabuleiro.vitoria .peca.ligada { background: #C9E265; }
.desafio-rodape { display: flex; justify-content: space-between; align-items: center; }

/* ONG e ranking */
.ong { display: flex; align-items: center; gap: 10px; }
.ong .avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--creme); display: grid; place-items: center; font-size: 22px; }
.ong b { display: block; font-size: 14px; }
.ong small { color: var(--texto-3); font-size: 12px; }
.ong-lista { display: flex; flex-direction: column; gap: 6px; }
.ong-lista button { display: flex; align-items: center; gap: 10px; text-align: left; border: 1.5px solid var(--borda); background: var(--branco); border-radius: 12px; padding: 8px 10px; }
.ong-lista button.ativa { border-color: var(--verde); background: #EEF6E7; }
.ranking { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ranking li { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 6px 8px; border-radius: 10px; }
.ranking li.voce { background: #F5FAD9; font-weight: 700; }
.ranking .pos { width: 22px; color: var(--texto-3); font-weight: 700; }
.ranking .val { margin-left: auto; font-variant-numeric: tabular-nums; }

/* abas */
.abas { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--branco); border-top: 1px solid var(--borda); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); z-index: 6; }
.aba { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--texto-3); padding: 6px; border-radius: 12px; }
.aba span { font-size: 20px; }
.aba.ativa { color: var(--verde); background: #EEF6E7; }

/* toast e modal */
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--marrom); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra); z-index: 20; animation: sobe .3s ease; max-width: 90%; text-align: center; }
@keyframes sobe { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.modal { position: fixed; inset: 0; background: rgba(35, 27, 6, .45); display: grid; place-items: center; z-index: 30; padding: 20px; }
.modal-caixa { background: #fff; border-radius: 20px; padding: 22px; width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 10px; animation: aparece .4s ease; }
.modal-caixa .grande-emoji { font-size: 64px; line-height: 1; }
.modal-caixa h2 { font-size: 20px; color: var(--verde); }
.recompensa { font-size: 28px; font-weight: 800; color: var(--verde); }
.recompensa.dourada { color: #B88A1C; text-shadow: 0 0 12px #F3C64A; }
.chuva { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.chuva span { position: absolute; top: -40px; font-size: 22px; animation: cai 1.6s linear forwards; }
@keyframes cai { to { transform: translateY(110vh) rotate(360deg); opacity: .2; } }
.nome-cao { font-weight: 700; }