/* ---------- as duas amigas em 3D ---------- */
.dupla { display: flex; align-items: flex-end; justify-content: center; height: 100%; width: 100%; }
.pers { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.pers img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  animation: respira-3d 3.4s ease-in-out infinite; transform-origin: 50% 100%; will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.pers.marininha img { animation-delay: -1.3s; }

/* tela principal: a Marinoca um pouquinho maior, a Raporoza ao lado */
.raposa-area .dupla.principal { gap: 0; }
.raposa-area .dupla.principal .pers.marininha { height: 100%; flex: 0 1 auto; margin-right: -4%; z-index: 1; }
.raposa-area .dupla.principal .pers.raporoza { height: 82%; flex: 0 1 auto; z-index: 2; }
.raposa-area .pers.rz { max-height: none; } /* o tamanho antigo era do desenho */

/* quem está falando cresce um tiquinho; quem ouve fica atenta */
.pers.estado-falando img { transform: scale(1.04); animation: fala-3d .5s ease-in-out infinite; }
.pers.estado-ouvindo img { animation: ouve-3d 1.2s ease-in-out infinite; }
.pers.humor-animada img, .pers.humor-risada img { animation: pulinho-3d .6s ease-in-out 2, respira-3d 3.4s ease-in-out .6s infinite; }
.pers.dormindo img { animation: respira-3d 5s ease-in-out infinite; }
.pers.brilhando img { filter: drop-shadow(0 0 18px #fff6a8) drop-shadow(0 10px 10px rgba(122, 59, 99, .15)); }
/* sujinha do banho: pintinhas por cima da pelúcia */
.pers.suja::after {
  content: "🟤 · 🟤 · 🟤"; position: absolute; left: 22%; right: 22%; top: 48%; text-align: center;
  font-size: clamp(10px, 2.4vh, 18px); letter-spacing: 6px; opacity: .75; pointer-events: none;
}

@keyframes respira-3d { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012, .992); } }
@keyframes fala-3d { 0%, 100% { transform: scale(1.04) rotate(0); } 50% { transform: scale(1.045) rotate(-1deg); } }
@keyframes ouve-3d { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
@keyframes pulinho-3d { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px); } }

/* ---------- balão: cada uma com a sua cor e o nome ---------- */
.balao .quem {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  margin: -6px 0 4px; opacity: .85;
}
.balao[data-quem="raporoza"] { border: 3px solid #F7B6D2; }
.balao[data-quem="raporoza"] .quem { color: var(--rosa-forte); }
.balao[data-quem="marininha"] { border: 3px solid #C9B2F5; background: #FBF8FF; }
.balao[data-quem="marininha"] .quem { color: var(--lilas); }

/* plaquinha "com quem estou conversando" */
.chip-papo {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); z-index: 3;
  border: none; border-radius: 20px; padding: 6px 14px; background: #fff; box-shadow: var(--sombra);
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--texto); white-space: nowrap; cursor: pointer;
}
.chip-papo[hidden] { display: none; }

/* opção com a carinha da personagem */
.opcao .emoji img { height: 72px; width: auto; display: block; }

/* a coluna da conversa rola; o balão nunca é espremido */
.conversa > * { flex-shrink: 0; }

/* ilustração no alto dos painéis (brincadeiras, orações, estante) */
.arte-painel {
  width: 100%; max-height: 22vh; object-fit: cover; border-radius: 22px; box-shadow: var(--sombra);
  grid-column: 1 / -1; display: block; margin-bottom: 8px;
}
@media (min-aspect-ratio: 1/1) { .arte-painel { max-height: 15vh; } }

/* provador da loja: a Raporoza desenhada mostra roupinhas e laços */
.provador { display: flex; justify-content: center; }
.provador .rz { height: 150px; width: auto; }

/* narradoras no cantinho do palco das histórias */
.narradora .dupla.mini { height: clamp(90px, 22vh, 170px); width: auto; }
.narradora { width: auto !important; }
.narradora .dupla.mini .pers.marininha { height: 100%; width: auto; margin-right: -8px; }
.narradora .dupla.mini .pers.raporoza { height: 82%; width: auto; }
.narradora .pers img { }
.pc-personagem .pc-amiga { height: calc(var(--altura, 400px) * .42); width: auto; display: block; }
.pc-personagem .pc-amiga[src*="raporoza"] { height: calc(var(--altura, 400px) * .34); }

.com-amigas .narradora { display: none; }

/* tela de descanso com as duas dormindo */
#raposaDormindo .dupla { height: 40vh; }

/* ---------- abertura ---------- */
.abertura {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: linear-gradient(180deg, #FFD6E7, #E7D8FF); cursor: pointer; transition: opacity .4s;
}
.abertura.saindo { opacity: 0; pointer-events: none; }
.abertura-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* deitado: o quarto de verdade no fundo e as duas GRANDES na frente (as artes aprovadas, sempre fiéis) */
.abertura-deitada { display: none; }
@media (min-aspect-ratio: 4/5) {
  .abertura-arte { display: none; }
  .abertura-deitada { display: block; position: absolute; inset: 0; overflow: hidden; }
  .abertura-quarto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) saturate(1.1); transform: scale(1.03); }
  .abertura-deitada::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(74, 42, 71, .25)); }
  .abertura-duas { position: absolute; left: 50%; bottom: 0; height: 92%; transform: translateX(-50%); display: flex; align-items: flex-end; z-index: 1; }
  .abertura-duas img { height: 100%; width: auto; animation: respira-3d 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
  .abertura-duas img + img { height: 80%; margin-left: -5%; animation-delay: -1.4s; }
  .abertura-duas { left: 42%; }
  .abertura .abertura-botao { z-index: 2; position: absolute; right: 5%; bottom: 10%; margin: 0; }
}

/* ---------- fundo de cena: a casa delas de verdade ---------- */
.fundo-cena {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: center / cover no-repeat url(cenarios/quarto.webp); transition: background-image .6s;
}
.fundo-cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 244, 250, .30), rgba(246, 236, 255, .55)); }
body.de-noite .fundo-cena, body.noite .fundo-cena { background-image: url(cenarios/quarto_noite.webp); }
body.de-noite .fundo-cena::after, body.noite .fundo-cena::after { background: linear-gradient(180deg, rgba(30, 20, 60, .10), rgba(60, 40, 100, .30)); }
body[data-lugar="cozinha"] .fundo-cena { background-image: url(cenarios/cozinha.webp); }
body[data-lugar="banheiro"] .fundo-cena { background-image: url(cenarios/banheiro.webp); }
body[data-lugar="escola"] .fundo-cena { background-image: url(cenarios/escola.webp); }
/* com a foto no fundo, as bolinhas decorativas do corpo saem */
body { background: #F6ECFF; }

/* palco das histórias com cenário pintado */
.pc-fundo.pc-foto { background-size: cover; background-position: center; }
.abertura-botao {
  position: relative; margin-bottom: 7vh; border: 6px solid #fff; border-radius: 40px; padding: 18px 40px;
  background: radial-gradient(circle at 35% 30%, #FF9CC6, var(--rosa-forte)); color: #fff;
  font-family: inherit; font-size: 34px; font-weight: 700; box-shadow: 0 8px 0 #B83E73, 0 14px 24px rgba(184, 62, 115, .35);
  animation: pulsa 1.6s ease-in-out infinite; cursor: pointer;
}
.abertura-aviso {
  position: relative; margin: 0 16px 6vh; background: rgba(255, 255, 255, .92); border-radius: 28px; padding: 18px 24px;
  text-align: center; color: var(--texto); box-shadow: var(--sombra);
}
.abertura-aviso h1 { font-size: 26px; margin: 0 0 6px; }
.abertura-aviso p { font-size: 18px; margin: 4px 0; }
.abertura-aviso a { color: #7E4CCB; font-weight: 700; }

/* ---------- polaroid da foto ---------- */
.polaroid {
  position: fixed; left: 50%; top: 50%; z-index: 15; background: #fff; padding: 12px 12px 36px; border-radius: 10px;
  box-shadow: 0 16px 40px rgba(74, 42, 71, .35); transform: translate(-50%, -50%) rotate(-3deg);
  animation: aparece .4s ease-out both; transition: opacity .7s, transform .7s;
}
.polaroid img { display: block; max-width: min(70vw, 520px); max-height: 55vh; border-radius: 4px; }
.polaroid.sai { opacity: 0; transform: translate(-50%, -30%) rotate(4deg) scale(.6); }

/* ---------- diário ---------- */
.diario {
  position: fixed; inset: 0; z-index: 12; display: none; flex-direction: column;
  background: linear-gradient(180deg, #FFF1F7, #F3EAFF); padding: 14px 16px; gap: 10px;
}
.diario.aberto { display: flex; }
.diario-topo { display: flex; align-items: center; justify-content: space-between; }
.diario-topo h2 { margin: 0; font-size: 30px; color: var(--lilas); }
.diario-fechar { width: 56px; height: 56px; border: none; border-radius: 50%; background: #fff; box-shadow: var(--sombra); font-size: 24px; cursor: pointer; }
.diario-corpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px; }
.diario-carregando, .diario-vazio { font-size: 22px; text-align: center; margin-top: 10vh; }
.diario-pergunta { font-size: 26px; font-weight: 600; text-align: center; margin: 4px 0; }

.senha-casas { display: flex; gap: 12px; }
.senha-casas span {
  width: 70px; height: 70px; border-radius: 20px; background: #fff; border: 3px dashed #D9C6F7;
  display: flex; align-items: center; justify-content: center; font-size: 40px;
}
.senha-casas span.cheia { border-style: solid; border-color: var(--lilas); }
.senha-casas.errou { animation: treme .4s; }
.senha-figuras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.senha-figuras button, .senha-apagar, .diario-humores button {
  border: none; border-radius: 22px; background: #fff; box-shadow: var(--sombra); cursor: pointer; font-family: inherit;
}
.senha-figuras button { width: 92px; height: 92px; font-size: 52px; }
.senha-figuras button:active, .diario-humores button:active { transform: translateY(3px); }
.senha-apagar { padding: 10px 22px; font-size: 20px; color: var(--texto); }

.diario-nova, .diario-acoes button {
  border: none; border-radius: 24px; padding: 14px 24px; font-family: inherit; font-size: 22px; font-weight: 700; cursor: pointer;
  background: var(--rosa-forte); color: #fff; box-shadow: 0 6px 0 #B83E73;
}
.diario-paginas { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 12px; }
.pagina { background: #fff; border-radius: 22px; padding: 14px 18px; box-shadow: var(--sombra); }
.pagina header { display: flex; gap: 10px; align-items: center; font-size: 16px; color: #8D6F8A; }
.pagina header span { display: inline-block; }
.pagina header span::first-letter { text-transform: uppercase; }
.pagina header b { font-size: 30px; }
.pagina p { font-size: 22px; margin: 8px 0 0; white-space: pre-wrap; }
.pagina img { display: block; margin-top: 10px; max-width: 100%; max-height: 260px; border-radius: 14px; }
.diario-humores { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.diario-humores button { width: 66px; height: 66px; font-size: 38px; }
.diario-humores button.escolhido { outline: 4px solid var(--lilas); }
.diario-texto {
  width: 100%; max-width: 720px; min-height: 26vh; border-radius: 22px; border: 3px solid #E6D6FA; padding: 14px 18px;
  font-family: inherit; font-size: 24px; color: var(--texto); resize: vertical; background: #fff;
}
.diario-foto-previa img { max-height: 160px; border-radius: 14px; box-shadow: var(--sombra); }
.diario-foto-previa[hidden] { display: none; }
.diario-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.diario-acoes .falar, .diario-acoes .foto { background: #fff; color: var(--texto); box-shadow: var(--sombra); }
.diario-acoes .falar.ouvindo { background: var(--lilas); color: #fff; animation: pulsa 1s ease-in-out infinite; }

@keyframes treme { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

@media (max-width: 600px) {
  .senha-figuras button { width: 76px; height: 76px; font-size: 42px; }
  .abertura-botao { font-size: 26px; padding: 14px 28px; }
}

/* ---------- lojinha: sonho, promoção, coleção, quarto ---------- */
.faixa-sonho, .album-colecao {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px;
  border: none; border-radius: 20px; padding: 10px 14px; background: #FFF6D9; box-shadow: var(--sombra);
  font-family: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.faixa-sonho b { grid-row: span 3; font-size: 40px; }
.faixa-sonho .sonho-txt { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.faixa-sonho small, .album-colecao small { font-size: 14px; opacity: .85; }
.album-colecao { grid-template-columns: 1fr; background: #EFE4FF; cursor: default; }
.album-colecao b { font-size: 18px; }
.barra { display: block; height: 12px; border-radius: 8px; background: rgba(0,0,0,.08); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #FFC24D, #FF7FB5); transition: width .6s; }
.promo-dia {
  display: block; margin-top: 6px; border: none; border-radius: 14px; padding: 6px 12px; background: #FFE3D1; color: #A34B12;
  font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.item-loja.em-promo { outline: 3px solid #FF9C5B; }
.item-loja.e-sonho { outline: 3px solid #FFC24D; }
.item-loja.e-sonho::before { content: "⭐"; position: absolute; top: 4px; right: 6px; font-size: 18px; }
.item-loja { position: relative; }
.item-loja.falta-colecao b { filter: grayscale(1) opacity(.45); }

/* quarto das amigas: decoração atrás das duas */
.quarto-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.quarto-decor span { position: absolute; line-height: 1; opacity: .9; filter: drop-shadow(0 4px 4px rgba(122,59,99,.15)); }
.raposa-area .dupla.principal { position: relative; z-index: 1; }

/* ---------- texto nunca sai das caixas ---------- */
.balao, .opcao, .capa, .aba, .especial, .item-tarefa, .pote, .linha-extrato, .saldo-loja, .sair,
.grande-sim, .grande-nao, .painel-rotina, .pagina, .diario-pergunta, .escuta, .chip-papo {
  overflow-wrap: anywhere; word-break: normal; hyphens: auto; min-width: 0;
}
.opcao .txt, .capa span, .capa em, .item-tarefa .nome { display: block; max-width: 100%; line-height: 1.15; text-align: center; }
.capa em { font-style: normal; font-size: 13px; }
.balao { max-width: 100%; }
.conversa { overflow-x: hidden; }
.chip-papo { max-width: 92%; white-space: normal; text-align: center; }

/* ---------- barra de cima: em pé ou em tela estreita, os cuidados descem para uma segunda linha ---------- */
@media (max-width: 820px) {
  .topo { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }
  .topo .cuidados { order: 3; width: 100%; justify-content: center; }
}

/* botões de baixo: o nome cabe inteiro */
.modo small { font-size: 11px; letter-spacing: -.2px; white-space: nowrap; }
@media (max-width: 600px) { .modo small { font-size: 10px; } }

/* ---------- com painel aberto (loja, tarefas, carteira, jogos, estante, cuidados), as duas encolhem ---------- */
.palco:has(.painel-rotina, .estante) { grid-template-columns: minmax(170px, 30%) 1fr; }
@media (max-aspect-ratio: 1/1) {
  .palco:has(.painel-rotina, .estante) { grid-template-columns: 1fr; grid-template-rows: 24% 1fr; }
}
.palco:has(.painel-rotina, .estante) .chip-papo { display: none; }

/* títulos dos painéis legíveis em cima do cenário */
.painel-rotina h3 {
  grid-column: 1 / -1; justify-self: start; margin: 4px 0 0; padding: 4px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .92); color: var(--lilas); font-size: 17px; box-shadow: var(--sombra);
}
/* com painel aberto, os enfeites do quarto saem de cena (fica limpo) */
.palco:has(.painel-rotina, .estante) .quarto-decor { display: none; }

/* deitado em tela baixa (tablet), a ilustração do painel sai para os itens aparecerem */
@media (min-aspect-ratio: 1/1) and (max-height: 760px) { .arte-painel { display: none; } }
/* narradoras maiores no palco: elas são as protagonistas */
.narradora .dupla.mini { height: clamp(120px, 34vh, 260px); }

/* banho: a banheira cobre só a parte de baixo da Raporoza, com água transparente; a Marinoca ajuda ao lado */
.raposa-area .banheira {
  left: 46%; right: 0; bottom: 0; height: 24%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(214, 236, 255, .8) 100%);
  border: 5px solid rgba(207, 230, 250, .95); backdrop-filter: blur(2px);
}
body[data-lugar] .quarto-decor, body.modo-historia .quarto-decor { display: none; }

/* capinha das roupas: a personagem vestida */
.capa .miniatura-roupa { height: 64px; width: auto; display: block; margin: 0 auto; }

/* ---------- objetos do cenário que dá pra tocar ---------- */
.toques-cena { position: fixed; inset: 0; z-index: 0; }
.toque-objeto { position: absolute; border: none; background: transparent; padding: 0; cursor: pointer; border-radius: 24px; }
.toque-objeto.brilho { animation: brilho-objeto .9s ease-out; }
@keyframes brilho-objeto {
  0% { box-shadow: 0 0 0 0 rgba(255, 236, 140, .0); background: rgba(255, 255, 255, 0); }
  30% { box-shadow: 0 0 30px 10px rgba(255, 236, 140, .75); background: rgba(255, 255, 255, .25); }
  100% { box-shadow: 0 0 0 0 rgba(255, 236, 140, 0); background: rgba(255, 255, 255, 0); }
}
/* o app fica por cima, mas os espaços vazios deixam o toque chegar no cenário */
.app { position: relative; z-index: 1; pointer-events: none; }
.app * { pointer-events: auto; }
.app .palco, .app .raposa-area, .app .conversa, .app .opcoes, .app .topo, .app footer, .app .base, .app .modos,
.app .dupla, .app .quarto-decor, .app .efeitos, .app .cuidados { pointer-events: none; }
.app .cuidados > *, .app .modos > *, .app .opcoes > * { pointer-events: auto; }

/* ---------- tela limpa: menu que abre e fecha ---------- */
.topo { justify-content: flex-start !important; min-height: 48px; }
.base { justify-content: center; gap: 28px; }
.botao-menu {
  position: relative; width: 82px; height: 82px; border-radius: 26px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #B98CF2, #F28DB8); color: #fff; box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: inherit;
}
.botao-menu b { font-size: 36px; line-height: 1; }
.botao-menu small { font-size: 13px; font-weight: 700; }
.botao-menu.tem-novidade::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: #FF5C8A; border: 3px solid #fff; animation: pulsa 1.2s ease-in-out infinite;
}
body.menu-aberto .botao-menu { background: var(--lilas); }
.gaveta {
  position: fixed; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(74, 42, 71, .25); padding: 0 12px 130px;
}
.gaveta[hidden] { display: none; }
.gaveta-cartao {
  width: min(720px, 100%); background: rgba(255, 255, 255, .96); border-radius: 30px; padding: 16px; box-shadow: 0 16px 40px rgba(74, 42, 71, .3);
  animation: aparece .25s ease-out both;
}
.gaveta-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gaveta-grade .modo { width: auto; height: 84px; font-size: 38px; }
.gaveta-grade .modo small { font-size: 13px; }
.gaveta h4 { margin: 14px 0 8px; font-size: 16px; color: var(--lilas); text-align: center; }
.gaveta .cuidados { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.gaveta #btnTarefas[data-faltam]:not([data-faltam=""])::after {
  content: attr(data-faltam); position: absolute; top: 4px; right: 8px; 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;
}
.gaveta .modo { position: relative; }
.gaveta .modo[data-modo="passear"] { background: #E3F4FF; }
.gaveta #btnLoja { background: #FFF0F6; } .gaveta #btnTarefas { background: #F3EBFF; }
.gaveta #btnDiario { background: #FFF6E5; } .gaveta #btnFoto { background: #E9F8F1; }
@media (max-width: 600px) { .gaveta-grade .modo { height: 74px; font-size: 32px; } .gaveta { padding-bottom: 116px; } }


/* ---------- guarda-roupa: um armário pra cada uma ---------- */
.armario {
  position: relative; border-radius: 22px 22px 10px 10px; padding: 14px 12px 12px; min-height: 220px; overflow: hidden;
  background: linear-gradient(180deg, #FFF6FB, #FCE7F2); border: 6px solid #F4B9D6; box-shadow: inset 0 0 0 3px #fff, var(--sombra);
  perspective: 900px;
}
.armario-raporoza { border-color: #E89BC3; background: linear-gradient(180deg, #FFF0F7, #FAD9EA); }
.armario .porta {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, #F7C6DE, #F2B0D0); border: 3px solid #fff; transition: transform .9s cubic-bezier(.3, .7, .2, 1);
}
.armario-raporoza .porta { background: linear-gradient(90deg, #F09CC6, #E57FB4); }
.armario .porta::after { content: ""; position: absolute; top: 46%; width: 14px; height: 14px; border-radius: 50%; background: #B98CF2; box-shadow: 0 2px 0 #7E4CCB; }
.armario .porta.esq { left: 0; transform-origin: left center; }
.armario .porta.esq::after { right: 12px; }
.armario .porta.dir { right: 0; transform-origin: right center; }
.armario .porta.dir::after { left: 12px; }
.armario.aberto .porta.esq { transform: rotateY(-100deg); }
.armario.aberto .porta.dir { transform: rotateY(100deg); }
.armario .cabideiro {
  display: flex; gap: 12px; overflow-x: auto; padding: 22px 4px 4px; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: linear-gradient(180deg, #C9A27E 0 6px, transparent 6px) top / 100% 6px no-repeat;
}
.armario .cabideiro::-webkit-scrollbar { display: none; }
.armario .peca {
  position: relative; flex: 0 0 auto; width: 128px; scroll-snap-align: start; border: none; border-radius: 18px; padding: 16px 6px 8px;
  background: #fff; box-shadow: 0 6px 14px rgba(122, 59, 99, .14); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: inherit; color: inherit; cursor: pointer; transition: transform .2s;
}
.armario .peca:active { transform: scale(.95); }
.armario .peca .cabide { position: absolute; top: -18px; left: 50%; width: 30px; height: 20px; margin-left: -15px; border: 3px solid #A98467; border-bottom: none; border-radius: 16px 16px 0 0; }
.armario .peca img { height: 130px; width: auto; max-width: 100%; object-fit: contain; }
.armario .peca span { font-size: 15px; font-weight: 700; text-align: center; line-height: 1.15; }
.armario .peca.vestida { box-shadow: 0 0 0 4px #B98CF2, 0 6px 14px rgba(122, 59, 99, .2); }
.armario-vazio { margin-top: 10px; width: 100%; border: none; border-radius: 18px; padding: 14px; font: inherit; font-size: 18px; font-weight: 700; background: #fff; box-shadow: var(--sombra); cursor: pointer; }

/* ---------- caminhar até o objeto ---------- */
.dupla.andando .pers img { animation: passinho .34s ease-in-out infinite !important; }
.dupla.andando .pers.raporoza img { animation-delay: .17s !important; }
@keyframes passinho { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }

/* ---------- cena ilustrada (as duas no desenho, ocupando a tela) ---------- */
.cena-ilustrada { position: fixed; inset: 0; z-index: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .5s; pointer-events: none; }
.cena-ilustrada.visivel { opacity: 1; }
body.em-cena .raposa-area .dupla.principal, body.em-cena .quarto-decor, body.em-cena .toques-cena, body.em-cena .brinquedos { visibility: hidden; }

/* ---------- arrumar o quarto ---------- */
.bagunca .capa.tem { background: #EFFFF3; }
.bagunca .capa.tem b { animation: pulinho-3d .6s ease-in-out; }
/* a ilustração fica no lugar das personagens, como um quadro grande (não fica embaixo do balão) */
.cena-ilustrada {
  inset: auto; left: 16px; right: 16px; top: 64px; height: 44vh; border-radius: 28px;
  box-shadow: 0 14px 34px rgba(122, 59, 99, .28), 0 0 0 6px rgba(255, 255, 255, .9);
}
@media (orientation: landscape) {
  .cena-ilustrada { left: 2vw; right: auto; width: 47vw; top: 70px; bottom: 116px; height: auto; }
}


/* ---------- diário em caderno: uma página por dia ---------- */
.caderno { display: flex; flex-direction: column; gap: 10px; perspective: 1400px; }
.folha {
  position: relative; min-height: 52vh; padding: 22px 22px 18px 64px; border-radius: 6px 18px 18px 6px;
  background:
    linear-gradient(90deg, transparent 46px, #F4A7C5 46px, #F4A7C5 48px, transparent 48px),
    repeating-linear-gradient(180deg, #FFFDF8 0 37px, #CFE0F5 37px 38px);
  background-color: #FFFDF8; box-shadow: 0 10px 26px rgba(122, 59, 99, .18), inset 8px 0 14px -10px rgba(122, 59, 99, .35);
  transform-origin: left center; touch-action: pan-y;
}
.folha::before { /* furinhos da espiral */
  content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 16px;
  background: radial-gradient(circle at 8px 8px, #E9DDF4 5px, #B79BD3 6px, transparent 7px) 0 0 / 16px 38px repeat-y;
}
.folha-data { margin: 0 0 8px; font-size: 22px; color: #9A4F86; text-transform: capitalize; line-height: 38px; }
.folha-texto { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Dancing Script", cursive; font-size: 22px; line-height: 38px; color: #3B3266; }
.folha-entrada p { margin: 0; }
.folha-humor { font-size: 26px; font-family: initial; }
.folha-vazia { color: #A99BC0; font-style: italic; margin: 0; }
.folha-foto { display: inline-block; margin: 10px 0; padding: 8px 8px 22px; background: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); transform: rotate(-2deg); position: relative; }
.folha-foto::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(255, 214, 231, .85); transform: rotate(3deg); }
.folha-foto img { display: block; max-width: min(260px, 60vw); max-height: 200px; object-fit: cover; }
.folha.lendo .folha-texto { font-size: 32px; line-height: 50px; }
.folha.lendo {
  background:
    linear-gradient(90deg, transparent 46px, #F4A7C5 46px, #F4A7C5 48px, transparent 48px),
    repeating-linear-gradient(180deg, #FFFDF8 0 49px, #CFE0F5 49px 50px);
}
.folha-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.folha-acoes button, .virar {
  border: none; border-radius: 16px; padding: 10px 16px; font: inherit; font-size: 18px; font-weight: 700; background: #F3EAFF; color: #5B3C8C; cursor: pointer;
}
.folha-acoes .folha-escrever { background: #FFD6E7; color: #9A2F6B; }
.caderno-nav { display: flex; align-items: center; justify-content: space-between; }
.virar { font-size: 22px; padding: 10px 22px; }
.virar:disabled { opacity: .35; }
.caderno-conta { color: #8A7AA8; font-weight: 700; }
.folha.vira-prox { animation: vira-prox .45s ease-in-out; }
.folha.vira-ant { animation: vira-ant .45s ease-in-out; }
@keyframes vira-prox { 0% { transform: rotateY(0); } 45% { transform: rotateY(-80deg); opacity: .6; } 55% { transform: rotateY(80deg); opacity: .6; } 100% { transform: rotateY(0); } }
@keyframes vira-ant { 0% { transform: rotateY(0); } 45% { transform: rotateY(80deg); opacity: .6; } 55% { transform: rotateY(-80deg); opacity: .6; } 100% { transform: rotateY(0); } }
.caderno { width: 100%; max-width: 760px; }
/* letra em cima das linhas do caderno; só a primeira letra da data maiúscula */
.folha { padding-top: 0; padding-bottom: 38px; }
.folha-data { margin: 0; text-transform: none; }
.folha-data::first-letter { text-transform: uppercase; }
.folha-acoes { margin-top: 0; padding-top: 6px; min-height: 38px; }
.folha-foto { margin: 8px 0 8px; }


/* ---------- passeios ---------- */
body[data-lugar="parque"] .fundo-cena { background-image: url(cenarios/parque.webp); }
body[data-lugar="parquinho"] .fundo-cena { background-image: url(cenarios/parquinho.webp); }
body[data-lugar="futebol"] .fundo-cena { background-image: url(cenarios/futebol.webp); }
body[data-lugar="praia"] .fundo-cena { background-image: url(cenarios/praia.webp); }
body[data-lugar="casa_vovo"] .fundo-cena { background-image: url(cenarios/casa_vovo.webp); }
body[data-lugar="parque"] .fundo-cena::after, body[data-lugar="parquinho"] .fundo-cena::after, body[data-lugar="futebol"] .fundo-cena::after,
body[data-lugar="praia"] .fundo-cena::after, body[data-lugar="casa_vovo"] .fundo-cena::after { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 244, 250, .25)); }
.capa-lugar b { width: 100%; height: 86px; border-radius: 14px; overflow: hidden; display: block; }
.capa-lugar b img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ---------- álbum de crescimento ---------- */
.album-crescimento { display: flex; gap: 14px; overflow-x: auto; padding: 10px 4px 14px; scrollbar-width: none; }
.album-crescimento figure { flex: 0 0 auto; margin: 0; padding: 8px 8px 6px; background: #fff; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
.album-crescimento figure:nth-child(odd) { transform: rotate(-2deg); }
.album-crescimento figure:nth-child(even) { transform: rotate(2deg); }
.album-crescimento img { display: block; width: 110px; height: 150px; object-fit: cover; }
.album-crescimento figcaption { text-align: center; font-size: 15px; font-weight: 700; color: #8A7AA8; margin-top: 4px; }


/* ---------- noites da semana (missão dormir no meu quarto) ---------- */
.luas-semana { margin-top: 10px; background: #2F2A5A; color: #fff; border-radius: 20px; padding: 12px 16px; text-align: center; }
.luas-semana b { display: block; font-size: 16px; margin-bottom: 6px; }
.luas-semana div { display: flex; justify-content: center; gap: 8px; font-size: 30px; }
.luas-semana span { opacity: .45; }
.luas-semana span.acesa { opacity: 1; filter: drop-shadow(0 0 6px #FFE58A); }
/* títulos dos painéis (rotina da noite, arrumar) legíveis em cima do quarto de noite */
.painel-rotina.dormir .saldo-loja, .painel-rotina.arrumar .saldo-loja {
  background: rgba(255, 255, 255, .94); color: #5B3C8C; border-radius: 16px; padding: 8px 14px; text-shadow: none;
}
body.de-noite .saldo-loja { background: rgba(255, 255, 255, .94); color: #5B3C8C; border-radius: 16px; padding: 6px 14px; text-shadow: none; }


/* ---------- provador de laços (Raporoza 3D) ---------- */
.provador-laco { display: flex; justify-content: center; }
.provador-laco img { height: 190px; width: auto; filter: drop-shadow(0 8px 10px rgba(122, 59, 99, .2)); }
/* de vez em quando um objeto do quarto brilha, pra ela lembrar que dá pra tocar */
.toque-objeto.convite { animation: convite-objeto 2.4s ease-in-out 2; }
@keyframes convite-objeto {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 236, 140, 0); background: rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 26px 8px rgba(255, 236, 140, .6); background: rgba(255, 255, 255, .16); }
}


/* sombra no chão, parada (o filtro de sombra em imagem animada deixava o tablet lento) */
.pers::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1%; height: 5%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(90, 40, 80, .28), rgba(90, 40, 80, 0));
}


/* personagens no tamanho do ambiente (a conta fica em cenario.js; sem conta, o tamanho de antes) */
.raposa-area .dupla.principal .pers.marininha { height: var(--alt-mari, 100%); }
.raposa-area .dupla.principal .pers.raporoza { height: var(--alt-rapo, 82%); }
.fundo-cena { background-size: cover; }

/* ---------- tablet em pé: as duas embaixo, pisando no chão do cenário; balão e opções em cima ---------- */
@media (max-aspect-ratio: 1/1) {
  body:not(.modo-historia) main.palco { grid-template-rows: minmax(0, 1fr) 46%; }
  body:not(.modo-historia) main.palco .conversa { order: 1; }
  body:not(.modo-historia) main.palco .raposa-area { order: 2; }
  body:not(.modo-historia) main.palco:has(.painel-rotina, .estante) { grid-template-rows: minmax(0, 1fr) 24%; }
  /* o biquinho do balão aponta pra baixo, pra quem está falando */
  body:not(.modo-historia) .balao::before { top: auto; bottom: -14px; border: 14px solid transparent; border-top-color: #fff; border-bottom: 0; }
}


/* carinha do dia, ao lado das moedinhas (toca pra mudar) */
.humor-hoje {
  border: none; border-radius: 999px; padding: 4px 12px; font-size: 26px; line-height: 1; cursor: pointer;
  background: rgba(255, 255, 255, .92); box-shadow: var(--sombra); margin-left: 8px;
}

/* abertura deitada: pés no tapete e a Rapo do tamanho de pelúcia (igual ao resto do app) */
@media (min-aspect-ratio: 4/5) {
  .abertura-duas { bottom: 4%; height: 84%; }
  .abertura-duas img + img { height: 66%; margin-left: -3%; }
  .abertura-duas::after {
    content: ""; position: absolute; left: 8%; right: 8%; bottom: -2%; height: 6%; z-index: -1;
    background: radial-gradient(closest-side, rgba(90, 40, 80, .3), rgba(90, 40, 80, 0));
  }
}


/* boca aberta: a segunda imagem fica pronta por baixo e só aparece enquanto fala */
.pers img.boca { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; visibility: hidden; pointer-events: none; }
.pers[data-boca="1"] img.boca { visibility: visible; }
.pers[data-boca="1"] img:not(.boca) { visibility: hidden; }