/* ============================================================
   PIPO · identidade visual ilustrada
   Floresta, madeira, botões brilhantes, o menino Pipo e o
   cachorrinho Paçoca. Carregado por último: sobrepõe o visual base.
   ============================================================ */
:root {
  --madeira: #C07B3F;
  --madeira-clara: #DDA064;
  --madeira-escura: #7A4A1E;
  --madeira-sombra: #5A3413;
  --creme: #FFF6E2;
  --creme-borda: #EACB94;
  --contorno: #1E3A74;
  --tinta: #3A2A18;
  --tinta-suave: #7C6750;
}
#app { background: var(--creme); }

/* ---------- fundos ilustrados ---------- */
.fundo-ilustrado {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; pointer-events: none;
}
.tela > .fundo-ilustrado, .tela-inicio > .fundo-ilustrado { position: absolute; inset: 0; z-index: 0; }
/* cada fundo tem versão em pé (--fundo) e, opcionalmente, deitada 16:9 (--fundo-largo) */
.fundo-ilustrado { background-image: var(--fundo); }
.mundo-aba-foto, .mapa-embreve-foto { background-image: var(--fundo-largo, none), var(--fundo); }
.fundo-suave { opacity: .28; filter: saturate(.9) blur(1px); }
.tela > .topo, .tela > .inicio-marca, .tela > .inicio-palco, .tela > .inicio-acoes, .tela > .barra-madeira,
.tela > .rp-quadro, .tela > .conq-lista, .tela > .mapa-rolagem, .tela > .mundos-abas { position: relative; z-index: 1; }

/* ---------- madeira e painéis ---------- */
.madeira {
  background: repeating-linear-gradient(180deg, #C8864A 0 16px, #BD7C41 16px 32px);
  border: 4px solid var(--madeira-escura);
  border-radius: 24px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 6px 0 var(--madeira-sombra), 0 14px 24px rgba(40, 20, 0, .25);
}
.placa-titulo {
  flex: 0 1 auto; margin: 0 auto;
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira));
  border: 3px solid var(--madeira-escura); border-radius: 14px;
  padding: 6px 14px; color: #fff; font-size: clamp(16px, 4.8vw, 21px); font-weight: 700; white-space: nowrap;
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--madeira-escura), 2px 0 0 var(--madeira-escura), -2px 0 0 var(--madeira-escura), 0 -2px 0 var(--madeira-escura);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--madeira-sombra);
}

/* ---------- botões ---------- */
.btn {
  --claro: #9B8BFF; --c: #7B61FF; --escuro: #5F3DC4; --c2: #43289A;
  background: linear-gradient(180deg, var(--claro) 0%, var(--c) 52%, var(--escuro) 100%);
  border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 0 var(--c2), inset 0 3px 0 rgba(255, 255, 255, .45), 0 12px 20px rgba(0, 0, 0, .2);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
.btn:active { box-shadow: 0 2px 0 var(--c2), inset 0 3px 0 rgba(255, 255, 255, .45); }
.btn-principal, .btn-jogar { --claro: #86E46E; --c: #3FC23C; --escuro: #28A12A; --c2: #1B7A1D; }
.btn-azul { --claro: #7CC4FF; --c: #3B92F5; --escuro: #2A72D6; --c2: #1C4F9C; }
.btn-secundario { --claro: #FFFFFF; --c: #FFF8EA; --escuro: #F1E2C4; --c2: #D5BD90; color: var(--tinta); text-shadow: none; }
.btn.desabilitado { --claro: #D8D2C4; --c: #C9C1B0; --escuro: #B4AA96; --c2: #8F8672; }
.btn-ico { width: 46px; height: 46px; margin: -6px 2px -6px -8px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }

.btn-ilustrado {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center; position: relative;
  transition: transform .1s;
}
.btn-ilustrado img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.btn-ilustrado:active { transform: scale(.9); }
.btn-ilustrado.mudo img { filter: grayscale(1) opacity(.65); }
.btn-ilustrado.mudo::after {
  content: ''; position: absolute; width: 70%; height: 6px; border-radius: 3px; background: #E03131;
  transform: rotate(-40deg); box-shadow: 0 0 0 2px #fff;
}
.btn-grande-ico { width: 64px; height: 64px; }

/* ---------- pílulas (estrelas e moedas) ---------- */
.pilula {
  background: rgba(22, 44, 92, .72); color: #fff;
  border: 2px solid rgba(255, 255, 255, .7);
  padding: 4px 14px 4px 6px; font-size: 19px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.topo .pilula { flex: none; }
.moeda-ico, .estrela-ico { width: 1.45em; height: 1.45em; margin: -4px 0; object-fit: contain; flex: none; vertical-align: middle; }
.moeda-voando { width: 34px; height: 34px; margin: -17px 0 0 -17px; }

/* ---------- o herói (menino Pipo) e o companheiro ---------- */
.heroi { position: relative; display: inline-block; }
.heroi-moldura { width: 100%; height: 100%; }
.heroi-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; cursor: pointer; transform-origin: 50% 100%; }
.heroi .balao { left: 58%; bottom: 86%; }
.heroi[data-estado="feliz"] .heroi-img, .heroi[data-estado="confiante"] .heroi-img, .heroi[data-estado="oi"] .heroi-img,
.heroi[data-estado="lendo"] .heroi-img, .heroi[data-estado="jogando"] .heroi-img, .heroi[data-estado="abraco"] .heroi-img { animation: respirar-h 3.2s ease-in-out infinite; }
.heroi[data-estado="comemorando"] .heroi-img, .heroi[data-estado="palmas"] .heroi-img { animation: quicar-h .7s ease-in-out infinite; }
.heroi[data-estado="animado"] .heroi-img { animation: pular-h .6s ease-out; }
.heroi[data-estado="pensando"] .heroi-img { animation: pensar-h 2.4s ease-in-out infinite; }
.heroi[data-estado="curioso"] .heroi-img, .heroi[data-estado="surpreso"] .heroi-img { animation: curioso-h 1.8s ease-in-out infinite; }
.heroi[data-estado="correndo"] .heroi-img { animation: quicar-h .45s ease-in-out infinite; }
.heroi-img.heroi-troca, .mascote-foto.heroi-troca { animation: troca-h .3s cubic-bezier(.3, 1.6, .5, 1) !important; }
@keyframes respirar-h { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
@keyframes quicar-h { 0%, 100% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.04, .96); } 60% { transform: translateY(-12%) scale(.98, 1.02); } }
@keyframes pular-h { 40% { transform: translateY(-8%) scale(1.03); } }
@keyframes pensar-h { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes curioso-h { 0%, 100% { transform: translateX(0) rotate(0); } 30% { transform: translateX(-2%) rotate(-3deg); } 70% { transform: translateX(2%) rotate(2deg); } }
@keyframes troca-h { 0% { transform: scale(.92); } 100% { transform: scale(1); } }

/* mascote ilustrado (Paçoca, Peppy...) */
.mascote-foto { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; cursor: pointer; }
.mascote-caixa[data-estado="feliz"] .mascote-foto { animation: respirar-h 2.6s ease-in-out infinite; }
.mascote-caixa[data-estado="comemorando"] .mascote-foto, .mascote-caixa[data-estado="palmas"] .mascote-foto { animation: quicar-h .6s ease-in-out infinite; }
.mascote-caixa[data-estado="animado"] .mascote-foto { animation: pular-h .6s ease-out; }

/* ================= INÍCIO ================= */
.tela-inicio { align-items: stretch; }
.tela-inicio .fundo-ilustrado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(120, 200, 255, .35) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgba(40, 90, 20, .25) 100%); }
.inicio-marca { margin-top: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.logo {
  position: relative; display: inline-flex; justify-content: center;
  font-size: clamp(74px, 23vw, 112px); font-weight: 700; letter-spacing: 0; line-height: .95;
}
.logo span {
  color: var(--cor);
  text-shadow:
    4px 0 0 var(--contorno), -4px 0 0 var(--contorno), 0 4px 0 var(--contorno), 0 -4px 0 var(--contorno),
    3px 3px 0 var(--contorno), -3px 3px 0 var(--contorno), 3px -3px 0 var(--contorno), -3px -3px 0 var(--contorno),
    0 10px 0 var(--contorno), 0 16px 18px rgba(0, 0, 0, .3);
  animation: letra 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .15s);
}
.logo-estrela { position: absolute; width: .62em; height: .62em; right: -.36em; top: -.18em; transform: rotate(14deg); animation: girar-estrela 4s ease-in-out infinite; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
@keyframes girar-estrela { 0%, 100% { transform: rotate(14deg) scale(1); } 50% { transform: rotate(-6deg) scale(1.12); } }
.faixa-madeira {
  display: inline-block; margin-top: 10px;
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira));
  border: 3px solid var(--madeira-escura); border-radius: 14px;
  padding: 5px 22px; color: #fff; font-size: 18px; font-weight: 700;
  text-shadow: 0 2px 0 var(--madeira-escura);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--madeira-sombra);
}
.inicio-palco { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; padding-top: 34px; }
.heroi-inicio { height: 100%; max-height: 330px; }
.heroi-inicio .heroi-img { width: auto; }
.heroi-inicio .balao { left: 62%; bottom: 84%; font-size: 17px; }
/* o companheiro acompanha a altura do Pipo (cerca de 60%) */
.amigo-inicio { height: 60%; max-height: 200px; aspect-ratio: 380 / 454; margin-left: -4%; margin-bottom: 2px; }
.amigo-inicio .balao { display: none; }
.inicio-acoes { gap: 12px; padding: 8px 24px 14px; }
.btn-jogar { width: min(100%, 320px); font-size: 34px; padding: 16px 28px; animation: respirar-btn 2s ease-in-out infinite; }
.btn-rapido { width: min(100%, 280px); font-size: 21px; padding: 11px 22px; }
.btn-premium { margin-top: -2px; }
.barra-madeira {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: repeating-linear-gradient(180deg, #C8864A 0 16px, #BD7C41 16px 32px);
  border-top: 4px solid var(--madeira-escura); border-radius: 26px 26px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 -6px 16px rgba(40, 20, 0, .2);
}
.barra-madeira button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.barra-madeira button > img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3)); }
.barra-madeira button:active { transform: scale(.92); }
.barra-madeira small { color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 2px 0 var(--madeira-escura), 1px 0 0 var(--madeira-escura), -1px 0 0 var(--madeira-escura); }
.barra-madeira .barra-avatar { border-radius: 50%; object-fit: cover !important; object-position: 50% 6%; background: #7FD3FF; border: 3px solid #fff; }
.barra-madeira .selo-numero { top: -4px; right: 14%; }

/* telas baixas (celulares pequenos): tudo mais compacto para os personagens aparecerem */
@media (max-height: 700px) {
  .logo { font-size: clamp(56px, 16vw, 76px); }
  .faixa-madeira { font-size: 15px; margin-top: 6px; padding: 3px 16px; }
  .inicio-palco { padding-top: 26px; }
  .inicio-acoes { gap: 8px; padding-bottom: 8px; }
  .btn-jogar { font-size: 28px; padding: 10px 24px; }
  .btn-rapido { font-size: 18px; padding: 8px 18px; }
  .btn-premium { padding: 6px 16px 6px 12px; font-size: 15px; }
  .barra-madeira { padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .barra-madeira button > img { width: 38px; height: 38px; }
  .barra-madeira small { font-size: 12px; }
}

/* ================= MAPA ================= */
.tela-mapa { background: #6FBF55; }
.fundo-mapa::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .12); }
.mapa-topo { background: linear-gradient(180deg, rgba(10, 40, 10, .35), rgba(10, 40, 10, 0)); }
.mapa-rolagem { padding-bottom: 96px; }
.mapa-area { background: rgba(255, 255, 255, .2); border: 3px dashed rgba(255, 255, 255, .55); opacity: 1; }
.mapa-area.bloqueada { background: rgba(40, 40, 60, .22); filter: none; }
.placa-mundo {
  position: absolute; top: 74px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: repeating-linear-gradient(180deg, #C8864A 0 12px, #BD7C41 12px 24px);
  border: 4px solid var(--madeira-escura); border-radius: 18px;
  padding: 8px 22px; white-space: nowrap;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 6px 0 var(--madeira-sombra), 0 12px 20px rgba(0, 0, 0, .25);
}
.placa-mundo span {
  color: #fff; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  text-shadow: 0 3px 0 var(--madeira-escura), 2px 0 0 var(--madeira-escura), -2px 0 0 var(--madeira-escura), 0 -2px 0 var(--madeira-escura);
}
.placa-cadeado { width: 22px; height: 22px; }
.caminho-base { stroke: #F4DDAA; stroke-width: 30; }
.caminho-tracos { stroke: #D9B774; }
.estacao-bola {
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6) 0 16%, transparent 17%),
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 60%, #fff), var(--cor));
  border: 5px solid #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .22), 0 10px 16px rgba(0, 0, 0, .2);
}
.estacao-bola img.icone-desafio { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .2)); }
.estacao-bola .icone-desafio.emoji { font-size: 36px; font-family: var(--emoji); }
.estacao.grande .estacao-bola .icone-desafio.emoji { font-size: 46px; }
.estacao-estrelas { gap: 0; margin-top: 0; }
.estacao-estrelas img { width: 22px; height: 22px; margin: 0 -2px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.estacao-estrelas img.off { filter: grayscale(1) brightness(1.4) opacity(.7); }
.estacao.bloqueada .estacao-bola, .estacao.premium .estacao-bola { background: linear-gradient(180deg, #E8E4DA, #C9C3B5); }
.estacao.bloqueada .icone-desafio, .estacao.premium .icone-desafio { filter: grayscale(1); opacity: .5; }
.estacao-cadeado { background: none; border: 0; width: 34px; height: 34px; right: -10px; bottom: -8px; }
.estacao-cadeado img { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.estacao-cadeado.coroa { background: linear-gradient(135deg, #FFE08A, #F5B800); border: 3px solid #fff; width: 30px; height: 30px; }
.estacao-num { background: #1E3A74; color: #fff; border: 2px solid #fff; }
.heroi-mapa { position: absolute; width: 74px; height: 98px; transform: translate(-50%, -72%); z-index: 4; }
.heroi-mapa .balao { font-size: 15px; left: 50%; bottom: 100%; transform: translateX(-50%); border-radius: 18px; }
.heroi-mapa .balao.balao-entrar { animation: none; }
.mapa-embreve { background: rgba(255, 255, 255, .85); border: 3px dashed #fff; color: var(--tinta); gap: 6px; }
.mapa-embreve-foto { width: 120px; height: 80px; border-radius: 16px; background-size: cover; background-position: center; border: 3px solid #fff; filter: grayscale(.5); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }

.mundos-abas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: repeating-linear-gradient(180deg, #C8864A 0 14px, #BD7C41 14px 28px);
  border-top: 4px solid var(--madeira-escura); border-radius: 22px 22px 0 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), 0 -6px 16px rgba(0, 0, 0, .2);
}
.mundos-abas::-webkit-scrollbar { display: none; }
.mundo-aba { flex: 1 0 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mundo-aba-foto {
  position: relative; width: 100%; max-width: 86px; height: 50px; border-radius: 12px;
  background-size: cover; background-position: center;
  border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  display: grid; place-items: center;
}
.mundo-aba.em-breve .mundo-aba-foto { filter: saturate(.35) brightness(.8); }
.mundo-aba-cadeado { width: 28px; height: 28px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.mundo-aba.ativa .mundo-aba-foto { border-color: #FFD43B; box-shadow: 0 0 0 3px #FFD43B, 0 3px 0 rgba(0, 0, 0, .25); transform: translateY(-3px); }
.mundo-aba small { color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 2px 0 var(--madeira-escura); white-space: nowrap; }

/* ================= JOGO ================= */
.tela-jogo { background: linear-gradient(180deg, color-mix(in srgb, var(--cor-desafio) 22%, #CFEFFF) 0%, var(--creme) 50%); }
.jogo-icone { background: #fff; border: 3px solid var(--cor-desafio); }
.jogo-icone img { width: 36px; height: 36px; object-fit: contain; }
.jogo-icone .emoji { font-size: 26px; font-family: var(--emoji); }
.jogo-mascote { width: 76px; }
.heroi-busto { width: 76px; height: 76px; }
.heroi-busto .heroi-moldura {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 40%, #BFE9FF, #6FC3F7);
  border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.heroi-busto .heroi-img { position: absolute; width: 190%; height: auto; max-width: none; left: 50%; top: -2%; margin-left: -95%; object-fit: initial; transform-origin: 50% 30%; }
.heroi-busto .balao { left: 72%; top: 90%; bottom: auto; border-radius: 4px 18px 18px 18px; font-size: 16px; }
.jogo-missao-cartao { border: 3px solid var(--creme-borda); }
.jogo-missao-cartao::before { border-right-color: var(--creme-borda); left: -12px; }

/* ================= RECOMPENSA ================= */
.resultado { background: rgba(30, 50, 20, .55); }
.resultado-cartao {
  background: var(--creme); border: 6px solid var(--madeira); border-radius: 30px;
  box-shadow: inset 0 0 0 3px var(--creme-borda), 0 8px 0 var(--madeira-escura), 0 30px 60px rgba(0, 0, 0, .35);
  padding-top: 18px;
}
/* o cartão vira coluna: personagens no topo, depois título, fita, estrelas... */
.resultado-cartao { display: flex; flex-direction: column; align-items: center; }
.resultado-mascote { order: 1; } .resultado-titulo { order: 2; } .resultado-fita { order: 3; }
.resultado-estrelas { order: 4; } .resultado-moedas { order: 5; } .resultado-extras { order: 6; width: 100%; } .resultado-botoes { order: 7; }
.resultado-fita {
  position: static; transform: none; margin: 4px 0 0; font-size: 15px; padding: 4px 14px;
  background: linear-gradient(180deg, var(--madeira-clara), var(--madeira)); border: 3px solid var(--madeira-escura);
  text-shadow: 0 2px 0 var(--madeira-escura); display: flex; align-items: center; gap: 6px;
}
.btn-proxima { white-space: nowrap; font-size: 19px; padding: 13px 16px; min-width: 0; }
.resultado-botoes { gap: 10px; max-width: 100%; }
.resultado-botoes .btn-grande-ico, .resultado-botoes .btn-redondo { width: 54px; height: 54px; flex: none; }
.resultado-cartao { min-width: 0; }
.fita-icone { width: 26px; height: 26px; object-fit: contain; }
.resultado-fita .emoji.fita-icone { width: auto; height: auto; font-size: 20px; }
.resultado-mascote { width: auto; display: flex; justify-content: center; align-items: flex-end; margin: -96px auto 0; height: 170px; }
.heroi-resultado { height: 170px; }
.heroi-resultado .heroi-img { width: auto; }
.amigo-resultado { width: 96px; margin-left: -18px; }
.heroi-resultado .balao, .amigo-resultado .balao { display: none; }
.resultado-titulo {
  color: #FF8A1E; font-size: 34px;
  text-shadow: 3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff, 0 6px 0 var(--madeira-escura);
}
.res-estrela img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(1.35) opacity(.55); transition: filter .2s; }
.res-estrela.acesa img { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.resultado-moedas { color: #C77700; }
.res-moeda .moeda-ico { width: 40px; height: 40px; }
.resultado-total { background: rgba(22, 44, 92, .8); color: #fff; }

/* ================= JOGOS RÁPIDOS ================= */
.tela-rapidos { background: var(--creme); }
.rp-quadro { flex: 1; min-height: 0; margin: 6px 12px 16px; padding: 10px 10px 12px; display: flex; flex-direction: column; }
.rp-quadro-titulo {
  margin: 2px 0 10px; text-align: center; color: #fff; font-size: 26px;
  text-shadow: 0 3px 0 var(--madeira-escura), 2px 0 0 var(--madeira-escura), -2px 0 0 var(--madeira-escura), 0 -2px 0 var(--madeira-escura);
}
.rp-grade {
  flex: 1; min-height: 0; overflow-y: auto;
  grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px;
  background: var(--creme); border-radius: 18px; border: 3px solid var(--creme-borda);
  box-shadow: inset 0 3px 8px rgba(120, 70, 20, .15);
}
.rp-cartao {
  background: color-mix(in srgb, var(--cor) 20%, #fff); color: var(--tinta);
  border: 3px solid color-mix(in srgb, var(--cor) 55%, #fff);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--cor) 45%, #9a8a70);
  padding: 12px 6px 10px; border-radius: 20px; gap: 4px;
}
.rp-cartao::before { display: none; }
.rp-cartao:last-child:nth-child(3n+1) { grid-column: 2; }
.rp-icone { width: 64px; height: 64px; background: none; }
.rp-icone img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .2)); }
.rp-icone .emoji { font-size: 44px; font-family: var(--emoji); }
.rp-cartao b { font-size: 14px; text-shadow: none; line-height: 1.15; }
.rp-folha-icone img { width: 60px; height: 60px; object-fit: contain; }
.rp-folha-icone .emoji { font-size: 44px; font-family: var(--emoji); }
.rp-folha-cartao { background: var(--creme); border: 5px solid var(--madeira); box-shadow: inset 0 0 0 3px var(--creme-borda), 0 8px 0 var(--madeira-escura), 0 30px 60px rgba(0, 0, 0, .35); }
.rp-fechar { background: none; width: 46px; height: 46px; }
.rp-fechar img { width: 46px; height: 46px; }

/* ================= PERFIL ================= */
.perfil-palco { gap: 0; }
.heroi-perfil { position: relative; z-index: 1; height: 88%; margin-right: -4%; margin-bottom: 4px; }
.heroi-perfil .heroi-img { width: auto; }
.heroi-perfil .balao { display: none; }
.mascote-perfil { width: min(34vw, 150px, 20vh); }
.perfil-item-foto { width: 78px; height: 78px; object-fit: contain; margin: -8px 0 -4px; }
.perfil-item.em-breve { background: #F3EFE6; }
.perfil-item.em-breve .perfil-item-icone { filter: grayscale(.7); opacity: .6; }
.item-selo.em-breve { background: #E9E2F8; color: #6B4FC4; }
.perfil-aba.ativa { background: linear-gradient(180deg, var(--madeira-clara), var(--madeira)); box-shadow: 0 3px 0 var(--madeira-escura); }

/* ================= CONQUISTAS ================= */
.tela-conquistas { background: var(--creme); }
.conq { border: 3px solid var(--creme-borda); }
.conq-cadeado { background: none; border: 0; width: 30px; height: 30px; }
.conq-cadeado img { width: 30px; height: 30px; }

/* ================= DOBRAR MOEDAS (vídeo recompensado) ================= */
.btn-dobrar {
  order: 5; display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 8px 18px 8px 10px; text-align: left;
  --claro: #FFD66B; --c: #FFB020; --escuro: #F08C00; --c2: #B86200;
}
.btn-dobrar .dobrar-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #F08C00; font: 700 16px var(--fonte); text-shadow: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.btn-dobrar b { display: block; font-size: 18px; line-height: 1.1; }
.btn-dobrar small { display: block; font-size: 12px; font-weight: 500; opacity: .95; line-height: 1.2; }
.btn-dobrar:not(.feito):not(:disabled) .dobrar-ico { animation: respirar-btn 1.4s ease-in-out infinite; }
.btn-dobrar.feito { --claro: #86E46E; --c: #3FC23C; --escuro: #28A12A; --c2: #1B7A1D; }
.btn-dobrar.feito .dobrar-ico { color: var(--verde-escuro); }
.btn-dobrar:disabled { cursor: default; }
/* celular baixinho: o cartão encolhe um pouco para o botão caber; se ainda faltar, rola */
.resultado { overflow-y: auto; place-items: safe center; }
@media (max-height: 820px) {
  .resultado { padding: 80px 12px 12px; }
  .resultado-mascote { height: 128px; margin-top: -76px; }
  .heroi-resultado { height: 128px; }
  .amigo-resultado { width: 74px; }
  .res-estrela { width: 54px; height: 54px; }
  .res-estrela[data-i="1"] { width: 70px; height: 70px; }
  .resultado-titulo { font-size: 28px; }
  .res-selo { padding: 5px 12px; }
}

/* vídeo de teste (no app da loja, o vídeo de verdade aparece no lugar) */
.ad-camada {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 10, 20, .86); animation: entrar-pulo .25s ease both;
}
.ad-camada.saindo { opacity: 0; transition: opacity .25s; }
.ad-janela { position: relative; width: min(100%, 520px); padding: 12px; border-radius: 22px; background: #1B1B24; color: #fff; text-align: center; }
.ad-tela {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(135deg, #3FB6FF, #7ED957);
}
.ad-play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(255, 255, 255, .9); color: #2F9BFF; padding-left: 4px; }
.ad-tela small { font-weight: 600; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ad-conta { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .45); font-size: 17px; }
.ad-barra { height: 6px; margin-top: 10px; border-radius: 3px; background: #3A3A48; overflow: hidden; }
.ad-barra i { display: block; width: 0; height: 100%; background: #FFC93C; transition: width linear; }
.ad-janela p { margin: 10px 0 2px; font-size: 14px; opacity: .8; }
.ad-fechar {
  position: absolute; top: -12px; left: -12px; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid #fff; background: #3A3A48; color: #fff; font: 700 16px var(--fonte); cursor: pointer;
}