/* =========================================================
   Cuidados: barra do topo
   ========================================================= */
.app { position: relative; z-index: 1; }
.conversa { scrollbar-width: none; }
.conversa::-webkit-scrollbar { display: none; }
.topo { justify-content: flex-start; gap: 14px; }
.cuidados { display: flex; gap: 10px; flex: 1; justify-content: center; }
.cuidado {
  --v: 70; --cor: #5CC98A;
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
  background: conic-gradient(var(--cor) calc(var(--v) * 1%), #EADFEA 0);
  display: grid; place-items: center; box-shadow: var(--sombra); position: relative;
}
.cuidado span {
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: 28px;
}
.cuidado.medio { --cor: #F5C04A; }
.cuidado.baixo { --cor: #F2789B; animation: chama 1.6s ease-in-out infinite; }
.cuidado:active { transform: translateY(3px); }
@keyframes chama { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12) rotate(-4deg); } }

/* visual conforme as necessidades */
.rz-sujeira, .rz-coberta { display: none; }
.rz.suja .rz-sujeira { display: inline; }
.rz.dormindo .rz-coberta { display: inline; }
.rz.dormindo .rz-olhos-normais, .rz.dormindo .rz-olhos-felizes { display: none; }
.rz.dormindo .rz-olhos-sono { display: inline; }
.rz.dormindo .rz-corpo { animation: respira 4.5s ease-in-out infinite; }
.rz.dormindo .rz-rabo { animation: none; }
.rz.comendo .rz-boca-fechada { animation: boca-f .22s steps(1) infinite; }
.rz.comendo .rz-boca-aberta { display: inline; animation: boca-a .22s steps(1) infinite; }
.rz.brilhando { filter: drop-shadow(0 0 18px #fff6a8) drop-shadow(0 10px 10px rgba(122,59,99,.15)); }

/* =========================================================
   Efeitos sobre a Raporoza
   ========================================================= */
.raposa-area { touch-action: none; }
.efeitos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.efeito { position: absolute; pointer-events: none; transform: translate(-50%, -50%); }
.bolha {
  width: var(--t, 30px); height: var(--t, 30px); border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 0 18%, rgba(255,255,255,.55) 30%, rgba(190,220,255,.45) 70%, rgba(255,190,230,.6));
  border: 2px solid rgba(255,255,255,.9); animation: bolha-nasce .25s ease-out both;
}
.bolha.estoura { animation: estoura .3s ease-in forwards; }
.gota { width: 10px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #8FD0FF; animation: cai .9s linear forwards; }
.brilho { font-size: 26px; animation: brilha 1s ease-out forwards; }
.migalha { font-size: 18px; animation: migalha .8s ease-in forwards; }
.zzz { font-size: 30px; font-weight: 700; color: #C9B3FF; animation: zzz 3s ease-out forwards; }
.coracao { font-size: 34px; animation: zzz 1.6s ease-out forwards; }
.comida-voando { position: fixed; font-size: 56px; z-index: 5; pointer-events: none; transition: transform .55s cubic-bezier(.5, -0.3, .7, 1), opacity .2s .5s; }
.comida-arrastando { position: fixed; font-size: 64px; z-index: 5; pointer-events: none; transform: translate(-50%, -50%) scale(1.1); }

.banheira {
  position: absolute; left: 6%; right: 6%; bottom: 2%; height: 34%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, #FFFFFF 0%, #E8F4FF 100%); border-radius: 24px 24px 60px 60px;
  border: 5px solid #CFE6FA; box-shadow: inset 0 10px 0 rgba(143,208,255,.35);
}
.banheira::before {
  content: ""; position: absolute; left: -2%; right: -2%; top: -22px; height: 40px;
  background:
    radial-gradient(circle at 10% 60%, #fff 0 22px, transparent 23px),
    radial-gradient(circle at 30% 40%, #fff 0 26px, transparent 27px),
    radial-gradient(circle at 52% 60%, #fff 0 22px, transparent 23px),
    radial-gradient(circle at 74% 40%, #fff 0 26px, transparent 27px),
    radial-gradient(circle at 92% 60%, #fff 0 22px, transparent 23px);
}

@keyframes bolha-nasce { from { transform: translate(-50%,-50%) scale(.2); opacity: 0; } to { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes estoura { to { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
@keyframes cai { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(-50%, 260px); opacity: 0; } }
@keyframes brilha { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(-50%,-90%) scale(1.3) rotate(40deg); opacity: 0; } }
@keyframes migalha { to { transform: translate(-50%, 90px) rotate(90deg); opacity: 0; } }
@keyframes zzz { 0% { transform: translate(-50%,-50%) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(10%, -160%) scale(1.3); opacity: 0; } }

/* =========================================================
   Bandeja das atividades (fica no lugar das opções)
   ========================================================= */
.bandeja { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; animation: aparece .3s ease-out both; }
.comida {
  width: 82px; height: 82px; border-radius: 22px; border: none; background: #fff; box-shadow: var(--sombra);
  font-size: 50px; cursor: grab; touch-action: none;
}
.passos { display: flex; gap: 10px; justify-content: center; width: 100%; }
.passo {
  min-width: 96px; padding: 10px 8px; border-radius: 22px; border: 3px solid transparent; background: #fff; box-shadow: var(--sombra);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--texto);
  display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: .45;
}
.passo b { font-size: 44px; line-height: 1.1; }
.passo.atual { opacity: 1; border-color: var(--lilas); animation: chama 1.6s ease-in-out infinite; }
.passo.feito { opacity: 1; background: #E9F8F1; }
.barrinha { width: 100%; height: 16px; border-radius: 10px; background: #F1E6F0; overflow: hidden; }
.barrinha i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rosa), var(--lilas)); border-radius: 10px; transition: width .2s; }
.sair { border: none; background: #fff; border-radius: 18px; padding: 10px 16px; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--texto); box-shadow: var(--sombra); cursor: pointer; }

.estudo-palavra { width: 100%; display: flex; justify-content: center; gap: 4px; font-size: 54px; font-weight: 700; letter-spacing: 2px; }
.estudo-palavra .sil:nth-child(odd) { color: var(--rosa-forte); }
.estudo-palavra .sil:nth-child(even) { color: var(--lilas); }
.estudo-palavra .sil + .sil::before { content: "·"; color: #D8C6E8; margin-right: 4px; }
.figura { width: 110px; height: 110px; border-radius: 26px; border: none; background: #fff; box-shadow: var(--sombra); font-size: 66px; cursor: pointer; }
.figura.certa { background: #DDF6E8; animation: pulinho-btn .5s; }
.figura.errada { animation: treme .4s; background: #FFE3EA; }
.ajuda { border: none; background: var(--lilas-claro); border-radius: 50%; width: 64px; height: 64px; font-size: 30px; cursor: pointer; }
@keyframes treme { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes pulinho-btn { 50% { transform: scale(1.15); } }

/* =========================================================
   Noite (hora de dormir)
   ========================================================= */
.ceu { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; background: linear-gradient(180deg, #2B2257 0%, #4B3A82 60%, #6B4E9E 100%); }
.ceu span { position: absolute; color: #FFF3B0; font-size: 22px; animation: pisca-estrela 2.5s ease-in-out infinite; }
.ceu span:nth-child(1) { left: 12%; top: 18%; }
.ceu span:nth-child(2) { left: 30%; top: 8%; animation-delay: .6s; }
.ceu span:nth-child(3) { left: 62%; top: 14%; animation-delay: 1.2s; }
.ceu span:nth-child(4) { left: 86%; top: 30%; animation-delay: .3s; }
.ceu span:nth-child(5) { left: 8%; top: 60%; animation-delay: 1.6s; }
.ceu span:nth-child(6) { right: 6%; top: 6%; font-size: 54px; animation: none; }
body.noite .ceu { opacity: 1; }
body.noite .balao, body.noite .opcao, body.noite .sair { background: #F3EEFF; }
body.noite .estrelas, body.noite .cuidado span { background: #EDE6FF; }
@keyframes pisca-estrela { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }

@media (max-width: 600px) {
  .cuidado { width: 52px; height: 52px; }
  .cuidado span { width: 42px; height: 42px; font-size: 22px; }
  .figura { width: 86px; height: 86px; font-size: 52px; }
  .estudo-palavra { font-size: 40px; }
}