/* =========================================================
   Topo: moedinhas, tarefas e loja
   ========================================================= */
.topo { gap: 10px; }
.moedas {
  border: none; border-radius: 30px; padding: 8px 14px; background: #fff; box-shadow: var(--sombra); cursor: pointer;
  font-family: inherit; font-size: 20px; font-weight: 700; color: var(--texto); display: flex; gap: 10px; align-items: center; flex: none;
}
.moedas .porquinho { color: var(--rosa-forte); }
.moedas.pulando { animation: pulinho-btn .45s ease-in-out 2; }
.botao-topo {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: none; background: #fff; box-shadow: var(--sombra);
  font-size: 28px; cursor: pointer; flex: none;
}
.botao-topo[data-faltam]:not([data-faltam=""])::after {
  content: attr(data-faltam); position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px;
  background: var(--rosa-forte); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}
@media (max-width: 700px) {
  .moedas { font-size: 16px; padding: 6px 10px; gap: 6px; }
  .botao-topo { width: 46px; height: 46px; font-size: 22px; }
  .cuidados { gap: 6px; }
  .cuidado { width: 46px; height: 46px; }
  .cuidado span { width: 37px; height: 37px; font-size: 20px; }
}

.toast-moeda {
  position: fixed; top: 74px; left: 18px; z-index: 30; background: #FFF6D6; color: #8A5A00; border: 3px solid #F5C04A;
  border-radius: 18px; padding: 8px 14px; font-size: 22px; font-weight: 700; box-shadow: var(--sombra);
  animation: toast-sobe 2.6s ease-out forwards;
}
@keyframes toast-sobe { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

/* =========================================================
   Painéis da rotina (ficam no lugar das opções)
   ========================================================= */
.painel-rotina { display: flex; flex-direction: column; gap: 10px; width: 100%; animation: aparece .3s ease-out both; }
.painel-rotina h3 { margin: 4px 0 0; font-size: 18px; color: var(--lilas); }

.lista-tarefas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.item-tarefa {
  border: none; border-radius: 18px; background: #fff; box-shadow: var(--sombra); padding: 8px 10px; cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  font-family: inherit; color: var(--texto);
}
.item-tarefa b { grid-row: span 2; font-size: 34px; }
.item-tarefa .nome { font-size: 14px; font-weight: 600; line-height: 1.15; }
.item-tarefa .valor { font-size: 14px; font-weight: 700; color: #B07A00; }
.item-tarefa.feita { background: #E9F8F1; }
.item-tarefa.feita .valor { color: #2E8B57; }

.grande-sim, .grande-nao {
  border: none; border-radius: 24px; padding: 14px; font-family: inherit; font-size: 22px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: var(--sombra);
}
.grande-sim b, .grande-nao b { font-size: 40px; }
.grande-sim { background: #DDF6E8; color: #1F6B45; }
.grande-nao { background: #FFF3D9; color: #8A5A00; }

/* carteira e cofrinho */
.potes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pote { border-radius: 24px; padding: 12px; display: flex; flex-direction: column; align-items: center; box-shadow: var(--sombra); }
.pote b { font-size: 48px; line-height: 1.1; }
.pote .n { font-size: 34px; font-weight: 700; }
.pote small { font-size: 14px; font-weight: 600; opacity: .8; text-align: center; }
.pote.carteira { background: #FFF6D6; color: #8A5A00; }
.pote.cofrinho { background: #FFE6F0; color: var(--rosa-forte); }
.rendeu { text-align: center; font-weight: 700; color: #2E8B57; background: #E9F8F1; border-radius: 16px; padding: 6px; }
.guardar { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 600; }
.guardar button { border: none; border-radius: 16px; padding: 8px 14px; background: #fff; box-shadow: var(--sombra); font-family: inherit; font-size: 18px; font-weight: 700; color: var(--rosa-forte); cursor: pointer; }
.guardar button:disabled { opacity: .4; }
.extrato { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 16px; padding: 8px 12px; }
.linha-extrato { font-size: 14px; }

/* loja */
.saldo-loja { text-align: center; font-weight: 700; font-size: 18px; color: #8A5A00; }
.item-loja em { font-style: normal; font-weight: 700; color: #B07A00; font-size: 14px; }
.item-loja.tem em { color: #2E8B57; }
.item-loja.caro { opacity: .55; }

/* despensa: quantidade no prato */
.comida { position: relative; }
.comida[data-qtd]::after {
  content: attr(data-qtd); position: absolute; bottom: -4px; right: -4px; min-width: 24px; height: 24px; border-radius: 12px;
  background: var(--lilas); color: #fff; font-size: 14px; font-weight: 700; display: grid; place-items: center;
}

/* brinquedos ao lado da Raporoza */
.brinquedos { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; z-index: 4; flex-wrap: wrap; }
.brinquedo { border: none; background: rgba(255,255,255,.75); border-radius: 50%; width: 52px; height: 52px; font-size: 30px; cursor: pointer; box-shadow: 0 3px 0 rgba(122,59,99,.12); }
.brinquedo.brincando { animation: pula-p .5s ease-in-out 3; }
.amostra-cor { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px !important; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); filter: saturate(.35) brightness(1.6); }
.amostra-cor { filter: none; }
.item-loja .amostra-cor { color: transparent; text-shadow: 0 0 0 rgba(255,255,255,.85); }

/* roupinhas da Raporoza: só aparecem as que ela está vestindo */
.rz .rz-roupa { display: none; }
.rz .rz-roupa.vestida { display: inline; }

/* tour: o que a Raporoza está explicando fica brilhando */
.destaque-tour { position: relative; z-index: 6; animation: brilho-tour 1.1s ease-in-out infinite; }
@keyframes brilho-tour {
  0%, 100% { box-shadow: 0 0 0 4px #FFE066, 0 0 18px 6px rgba(255, 224, 102, .8); }
  50% { box-shadow: 0 0 0 8px #FFE066, 0 0 30px 12px rgba(255, 224, 102, .95); }
}