/* =========================================================
   Raporoza maior na tela
   ========================================================= */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }
.palco { grid-template-columns: minmax(240px, 50%) 1fr; position: relative; min-height: 0; }
.conversa { min-height: 0; max-height: 100%; }
.raposa-area .rz { max-height: 600px; }
@media (max-aspect-ratio: 1/1) { .palco { grid-template-columns: 1fr; grid-template-rows: 52% 1fr; } }

/* indicador de "estou ouvindo" (não apaga o que a Raporoza falou) */
.escuta {
  align-self: center; display: none; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px;
  background: var(--lilas-claro); color: var(--lilas); font-size: 20px; font-weight: 600;
}
.escuta.ativa { display: flex; animation: aparece .25s ease-out both; }
.escuta .orelha { animation: pulsa 1s ease-in-out infinite; }

/* =========================================================
   Estante de historinhas
   ========================================================= */
.estante { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.estante-especiais { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.especial {
  border: none; border-radius: 22px; padding: 12px; font-family: inherit; font-size: 18px; font-weight: 700; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: var(--sombra);
}
.especial b { font-size: 38px; }
.especial.criar { background: linear-gradient(135deg, #F28DB8, #9B6BE0); }
.especial.inventar { background: linear-gradient(135deg, #7CC6FF, #6E7CF0); }
.abas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aba {
  border: none; border-radius: 18px; padding: 8px 14px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--texto); box-shadow: var(--sombra); display: flex; align-items: center; gap: 6px;
}
.aba b { font-size: 24px; }
.aba.ativa { background: var(--lilas); color: #fff; }
.capas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; padding-bottom: 8px; }
.capa {
  border: none; border-radius: 22px; background: #fff; box-shadow: var(--sombra); padding: 10px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--texto);
  animation: aparece .3s ease-out both;
}
.capa b { font-size: 56px; line-height: 1.1; }
.capa:nth-child(4n+1) { background: #FFF0F6; } .capa:nth-child(4n+2) { background: #F3EBFF; }
.capa:nth-child(4n+3) { background: #FFF6E5; } .capa:nth-child(4n) { background: #E9F8F1; }
.estante-vazia { text-align: center; color: var(--suave, #7B6A80); font-size: 18px; padding: 12px; }

/* =========================================================
   Modo história: o palco toma a tela
   ========================================================= */
.tela-historia { display: none; }
body.modo-historia .palco { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
body.modo-historia .raposa-area { display: none; }
body.modo-historia .tela-historia { display: block; }
body.modo-historia .conversa { max-height: 34vh; gap: 8px; }
body.modo-historia .topo, body.modo-historia footer .modos { display: none; }
body.modo-historia .app { grid-template-rows: minmax(0, 1fr) auto; }
body.modo-historia .microfone { width: 84px; height: 84px; font-size: 40px; }
body.modo-historia .palavra { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; font-size: 30px; padding: 6px 14px; background: rgba(239,228,255,.95); }
body.modo-historia .balao { font-size: 24px; }
body.modo-historia .balao::before { display: none; }

.tela-historia {
  position: relative; min-height: 0; height: 100%; border-radius: 28px; overflow: hidden;
  box-shadow: 0 8px 0 rgba(122, 59, 99, .15), inset 0 0 0 5px #fff;
}
.pc-fundo { position: absolute; inset: 0; overflow: hidden; }
.pc-fundo.entrando { animation: cena-entra .7s ease-out both; }
.pc-fundo.saindo { animation: cena-sai .7s ease-in both; }
.pc-chao { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 50% 50% 0 0 / 18% 18% 0 0; }
.pc-mar { position: absolute; left: 0; right: 0; bottom: 22%; height: 22%; background: linear-gradient(180deg, #6CC6F2, #2E9BD6); }
.pc-mar.alto { bottom: 0; height: 52%; }
.pc-mar::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -12px; height: 24px;
  background: radial-gradient(circle at 12px 12px, #8FD6F7 11px, transparent 12px) repeat-x; background-size: 34px 24px;
  animation: ondas 3s linear infinite;
}
.pc-lousa { position: absolute; left: 24%; right: 24%; top: 10%; height: 34%; background: #2F6B4F; border: 8px solid #B9855A; border-radius: 10px; }
.pc-decor { position: absolute; line-height: 1; user-select: none; }

.pc-personagem {
  position: absolute; bottom: 12%; transform: translateX(-50%); font-size: calc(var(--altura, 400px) * .26); line-height: 1;
  animation: personagem-entra .45s cubic-bezier(.3, 1.6, .5, 1) both; filter: drop-shadow(0 6px 4px rgba(0,0,0,.18)); z-index: 2;
}
.pc-personagem span { display: inline-block; }
.pc-personagem.saindo { animation: personagem-sai .35s ease-in forwards; }
.pc-acao-parado span { animation: respira-p 2.6s ease-in-out infinite; }
.pc-acao-pula span { animation: pula-p .8s ease-in-out infinite; }
.pc-acao-anda span { animation: anda-p 3s ease-in-out infinite; }
.pc-acao-balanca span { animation: balanca-p 1.4s ease-in-out infinite; }
.pc-acao-gira span { animation: gira-p 2s linear infinite; }
.pc-acao-voa { bottom: 46%; }
.pc-acao-voa span { animation: voa-p 2.4s ease-in-out infinite; }
.pc-acao-treme span { animation: treme-p .25s linear infinite; }
.pc-acao-dorme span { animation: respira-p 3.5s ease-in-out infinite; filter: saturate(.8); }
.pc-acao-dorme::after { content: attr(data-zzz); position: absolute; right: -18px; top: -24px; font-size: 26px; font-weight: 700; color: #9B6BE0; animation: zzz-p 2.5s ease-out infinite; }
.pc-acao-cresce span { animation: cresce-p 1.8s ease-in-out infinite; }

.pc-efeito { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.pc-efeito span { position: absolute; top: -10%; animation: cai-p linear infinite; }
.pc-ef-chuva span { color: #4FA9E8; }
.pc-ef-bolhas span { color: rgba(255,255,255,.85); font-weight: 700; animation-name: sobe-p; top: auto; bottom: -10%; }
.pc-ef-brilhos span, .pc-ef-estrelas span, .pc-ef-coracoes span { animation-name: brilha-p; top: auto; }
.pc-ef-brilhos span:nth-child(odd), .pc-ef-estrelas span:nth-child(odd), .pc-ef-coracoes span:nth-child(odd) { top: 20%; }
.pc-ef-brilhos span:nth-child(even), .pc-ef-estrelas span:nth-child(even), .pc-ef-coracoes span:nth-child(even) { top: 50%; }

/* decoração que se mexe */
.pc-nuvem { animation: nuvem-p 14s ease-in-out infinite alternate; }
.pc-voo { animation: voo-p 7s ease-in-out infinite alternate; }
.pc-gira-lento { animation: gira-p 30s linear infinite; }
.pc-pisca { animation: pisca-estrela 2.2s ease-in-out infinite; }
.pc-onda { animation: balanca-p 2.4s ease-in-out infinite; }
.pc-nada { animation: nada-p 9s ease-in-out infinite alternate; }
.pc-anda-lado { animation: anda-p 6s ease-in-out infinite; }
.pc-carro { animation: carro-p 9s linear infinite; }
.pc-pulo-agua { animation: pulo-agua-p 3.5s ease-in-out infinite; }

/* Raporoza narradora no cantinho do palco */
.narradora { position: absolute; left: 10px; bottom: 6px; width: clamp(90px, 18%, 150px); z-index: 4; pointer-events: none; }
.narradora .rz { width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.controles-historia { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; z-index: 5; }
.controles-historia button { width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); font-size: 24px; box-shadow: var(--sombra); cursor: pointer; }
.titulo-historia { position: absolute; top: 12px; left: 14px; z-index: 5; background: rgba(255,255,255,.9); border-radius: 16px; padding: 6px 12px; font-weight: 700; color: var(--rosa-forte); font-size: 16px; max-width: 60%; }

@keyframes cena-entra { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes cena-sai { to { opacity: 0; } }
@keyframes personagem-entra { from { opacity: 0; transform: translateX(-50%) translateY(40px) scale(.4); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes personagem-sai { to { opacity: 0; transform: translateX(-50%) scale(.6); } }
@keyframes respira-p { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05, .96); } }
@keyframes pula-p { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-38%); } }
@keyframes anda-p { 0%,100% { transform: translateX(-40%) scaleX(1); } 49% { transform: translateX(40%) scaleX(1); } 50% { transform: translateX(40%) scaleX(-1); } 99% { transform: translateX(-40%) scaleX(-1); } }
@keyframes balanca-p { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes gira-p { to { transform: rotate(360deg); } }
@keyframes voa-p { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-24%) rotate(4deg); } }
@keyframes treme-p { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes cresce-p { 0%,100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes zzz-p { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@keyframes cai-p { from { transform: translateY(0); } to { transform: translateY(120vh); } }
@keyframes sobe-p { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120vh); opacity: .2; } }
@keyframes brilha-p { 0%,100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } }
@keyframes nuvem-p { from { transform: translateX(-20px); } to { transform: translateX(40px); } }
@keyframes voo-p { 0% { transform: translate(0, 0); } 50% { transform: translate(60px, -14px); } 100% { transform: translate(120px, 6px); } }
@keyframes nada-p { from { transform: translateX(0) scaleX(1); } to { transform: translateX(80px) scaleX(1); } }
@keyframes carro-p { from { left: -10%; } to { left: 105%; } }
@keyframes pulo-agua-p { 0%,60%,100% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-60px) rotate(-30deg); } }
@keyframes ondas { from { transform: translateX(0); } to { transform: translateX(34px); } }