@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@600;700;800&display=swap');

:root{
  --laranja: #ff7a1a;
  --laranja-escuro: #e85d00;
  --laranja-claro: #ffb066;
  --preto: #1c1712;
  --preto-suave: #241d17;
  --creme: #fff4e2;
  --vermelho: #e8402f;
  --verde: #3fbf5f;
  --amarelo: #ffcf3d;
  --azul-ceu: #7fd4ff;
  --sombra: rgba(0,0,0,.35);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background: var(--preto);
  font-family: 'Nunito', sans-serif;
  color: var(--creme);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3, .titulo, button{ font-family: 'Baloo 2', 'Nunito', sans-serif; }

#app{
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--vh-real, 100dvh);
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg,#3a2a1c 0%, #241a12 70%);
  box-shadow: 0 0 60px rgba(0,0,0,.6);
  user-select: none;
}

.tela{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:1; transition: opacity .25s ease;
}
.tela.escondida{ opacity:0; pointer-events:none; }

/* ---------- fundo comum: o salão da Hamburgueria Barão por trás de tudo ---------- */
.fundo-quente{
  background:
    radial-gradient(circle at 20% 0%, rgba(255,176,102,.16), transparent 55%),
    radial-gradient(circle at 85% 90%, rgba(255,122,26,.14), transparent 55%),
    linear-gradient(180deg, rgba(20,15,10,.87) 0%, rgba(20,15,10,.91) 55%, rgba(14,10,7,.96) 100%),
    url('../img/cenario-fundo.jpg') center/cover no-repeat;
  background-color: #1c1712;
}

/* ================= TELA INICIAL ================= */
#tela-inicial{ align-items:center; justify-content:space-between; padding: 4vh 6vw 2vh; text-align:center; overflow-y:auto; }
.logo-wrap{ margin-top: 1vh; }
.logo-jogo{
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  font-weight: 800;
  color: var(--laranja);
  text-shadow: 0 4px 0 var(--preto), 0 8px 18px rgba(0,0,0,.5);
  letter-spacing: 1px;
  line-height: 1;
}
.logo-jogo span{ color: var(--creme); }
.subtitulo{ font-weight:700; color: var(--laranja-claro); margin-top:.4em; font-size: clamp(.95rem,3.2vw,1.2rem); }
.hero-inicial{
  height: min(34vh, 300px);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.45));
  animation: flutuar 2.6s ease-in-out infinite;
}
@keyframes flutuar{ 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-14px) rotate(2deg);} }

.menu-botoes{ display:flex; flex-direction:column; gap: 12px; width:min(360px, 82vw); margin: 0 auto; }
.btn{
  border:none; cursor:pointer;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight:700;
  font-size: 1.05rem;
  color: var(--preto);
  background: var(--amarelo);
  box-shadow: 0 6px 0 #c99a12, 0 10px 18px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 #c99a12, 0 4px 10px rgba(0,0,0,.3); }
.btn-primario{ background: var(--laranja); color:#fff; box-shadow: 0 6px 0 var(--laranja-escuro), 0 10px 18px rgba(0,0,0,.35); }
.btn-secundario{ background: #3a2c20; color: var(--creme); box-shadow: 0 6px 0 #201811, 0 10px 18px rgba(0,0,0,.35); }
.btn-fantasma{ background: transparent; color: var(--creme); box-shadow:none; border: 2px solid rgba(255,244,226,.35); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.menu-botoes a.btn{ text-decoration:none; text-align:center; }
.rodape-inicial{ font-size:.78rem; opacity:.65; }
.moedas-banco{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  background: rgba(0,0,0,.35); padding:5px 12px; border-radius:999px;
  font-weight:800; font-size:.85rem; color: var(--amarelo);
}
.moedas-banco img{ height:18px; width:auto; display:block; }

/* ================= TOPO COM VOLTAR ================= */
.topo{
  display:flex; align-items:center; gap:10px;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
}
.topo h2{ margin:0; font-size:1.3rem; color: var(--laranja-claro); flex:1; text-align:center; padding-right:36px;}
.btn-voltar{
  width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.08); color:var(--creme); border:none;
  font-size:1.1rem; cursor:pointer;
}

/* ================= MAPA DAS FASES ================= */
#tela-mapa{ padding-bottom: 1vh; }
.mapa-scroll{ flex:1; overflow-y:auto; padding: 2vh 6vw; }
.mundos{ display:flex; flex-direction:column; gap:16px; max-width:520px; margin:0 auto; }
.mundo-card{
  display:flex; align-items:center; gap:14px;
  background: linear-gradient(135deg, #33261a, #23190f);
  border-radius: var(--radius);
  padding: 12px 16px;
  border: 2px solid rgba(255,176,102,.15);
  cursor:pointer;
  position:relative;
  transition: transform .12s ease;
}
.mundo-card:active{ transform: scale(.97); }
.mundo-card.bloqueado{ cursor:default; filter: grayscale(.5); opacity:.6; }
.mundo-num{
  width:46px; height:46px; border-radius:50%;
  background: var(--laranja); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  flex-shrink:0; box-shadow: 0 4px 0 var(--laranja-escuro);
}
.mundo-card.bloqueado .mundo-num{ background:#5a4a3a; box-shadow:0 4px 0 #3a2f24;}
.mundo-info{ flex:1; text-align:left; }
.mundo-info h3{ margin:0 0 2px; font-size:1.05rem; color:var(--creme); }
.mundo-info p{ margin:0; font-size:.8rem; color: rgba(255,244,226,.6); }
.cadeado{ font-size:1.3rem; opacity:.7; }
.tag-em-breve{
  position:absolute; top:-8px; right:10px;
  background: var(--vermelho); color:#fff; font-size:.65rem; font-weight:800;
  padding: 3px 8px; border-radius: 999px; letter-spacing:.5px;
}

/* ================= MINHA TURMINHA ================= */
.turminha-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 2vh 6vw 3vh; overflow-y:auto; flex:1;
}
.personagem-card{
  background: linear-gradient(160deg,#33261a,#20160e);
  border-radius: 16px; padding: 10px 6px 12px;
  text-align:center; border: 2px solid rgba(255,176,102,.15);
  position:relative;
}
.personagem-card img{ width:100%; max-height:86px; object-fit:contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.personagem-card.bloqueado img{ filter: grayscale(1) brightness(.35); }
.personagem-card span{ display:block; font-weight:700; font-size:.82rem; margin-top:4px; }
.personagem-card.bloqueado span{ opacity:.5; }
.cadeado-mini{ position:absolute; top:6px; right:8px; font-size:1rem; }

/* ================= OPÇÕES / CRÉDITOS ================= */
.painel-conteudo{ flex:1; overflow-y:auto; padding: 1vh 7vw 3vh; }
.linha-opcao{
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,.05); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; font-weight:700;
}
.interruptor{
  width:52px; height:30px; border-radius:999px; background:#4a3b2c; position:relative; cursor:pointer; border:none; flex-shrink:0;
}
.interruptor::after{
  content:''; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; transition: left .15s ease;
}
.interruptor.ligado{ background: var(--verde); }
.interruptor.ligado::after{ left:25px; }
.creditos-texto{ line-height:1.7; font-size:.95rem; }
.creditos-texto b{ color: var(--laranja-claro); }
.creditos-logo{ text-align:center; margin-bottom:14px; }
.creditos-logo img{ height:90px; }

/* ================= JOGO ================= */
#tela-jogo{ background:#000; }
#canvas-jogo{ width:100%; height:100%; display:block; touch-action:none; }

.hud{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:14px;
  padding: max(10px, env(safe-area-inset-top)) 14px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
  pointer-events:none; z-index:5;
  font-weight:800; font-size: .95rem;
}
.hud-item{ display:flex; align-items:center; gap:5px; background: rgba(0,0,0,.35); padding:5px 10px; border-radius:999px; }
.hud-icone-moeda{ height:18px; width:auto; display:block; }
.hud-titulo{ margin-left:auto; text-align:right; font-size:.72rem; opacity:.85; line-height:1.2; }
.btn-pause{
  pointer-events:all; width:34px;height:34px;border-radius:50%; border:none;
  background:rgba(0,0,0,.4); color:#fff; font-size:1rem; cursor:pointer;
}

.controles-touch{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: 0 18px max(22px, env(safe-area-inset-bottom) + 10px);
  z-index:5;
}
.dpad{ display:flex; gap:10px; }
.tecla{
  width:64px; height:64px; border-radius:50%;
  background: rgba(255,255,255,.16); border: 2px solid rgba(255,255,255,.28);
  color:#fff; font-size:1.6rem; display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px);
  touch-action:none;
}
.tecla:active, .tecla.ativa{ background: rgba(255,255,255,.4); }
.tecla-pular{
  width:78px; height:78px; background: rgba(255,122,26,.55); border-color: rgba(255,176,102,.6);
}
.tecla-agachar{ display:none; background: rgba(127,212,255,.28); border-color: rgba(127,212,255,.5); }
/* na Cozinha Maluca (corredor automático) some o d-pad — não tem o que andar — e mostra o botão de agachar */
#tela-jogo.modo-corredor .dpad{ display:none; }
#tela-jogo.modo-corredor .tecla-agachar{ display:flex; }

/* overlays de pausa / fim de fase / game over */
.overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(10,7,4,.9), rgba(10,7,4,.94)),
    url('../img/cenario-fundo.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; z-index:10;
  padding: 4vh 6vw;
}
.overlay.escondida{ display:none; }
.cartao{
  background: linear-gradient(160deg,#3a2c1f,#1e150d);
  border-radius: 22px; padding: 26px 22px; width:min(420px,100%);
  text-align:center; box-shadow: 0 20px 40px rgba(0,0,0,.5); border: 2px solid rgba(255,176,102,.2);
}
.cartao h2{ margin:.1em 0 .3em; color: var(--laranja-claro); font-size:1.5rem; }
.estrelas{ font-size:2.1rem; letter-spacing:6px; margin: 6px 0 14px; }
.estrela-apagada{ opacity:.25; }
.stats-fase{ display:flex; justify-content:space-around; margin-bottom: 18px; }
.stat{ text-align:center; }
.stat b{ display:block; font-size:1.15rem; }
.stat small{ opacity:.7; }
.faixa-resgate{
  background: linear-gradient(90deg, var(--amarelo), var(--laranja));
  color:var(--preto); font-weight:800; padding:10px 12px; border-radius:14px;
  margin-bottom:16px; display:flex; align-items:center; gap:10px; justify-content:center;
}
.faixa-resgate img{ height:44px; }
.cartao .menu-botoes{ width:100%; }

/* ---------- popup de apresentação de vilão (1ª vez que encontra) ---------- */
.cartao-apresentacao{ max-width: 380px; }
.apresentacao-tag{
  display:inline-block; background: var(--vermelho); color:#fff; font-weight:800;
  font-size:.68rem; letter-spacing:.5px; padding:4px 12px; border-radius:999px; margin-bottom:10px;
}
.apresentacao-img{
  width: 130px; height:130px; object-fit:contain; display:block; margin:0 auto 6px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.5));
}
.apresentacao-subtitulo{ color: var(--laranja-claro); font-weight:700; font-size:.85rem; margin-bottom:10px; }
.apresentacao-texto{ font-size:.9rem; line-height:1.5; margin: 0 0 10px; text-align:left; }
.apresentacao-poder{ font-size:.88rem; line-height:1.5; text-align:left; background: rgba(255,255,255,.06); padding:10px 12px; border-radius:12px; margin-bottom:12px; }
.apresentacao-poder b{ color: var(--amarelo); }
.apresentacao-frase{ font-style:italic; color: var(--laranja-claro); font-size:.85rem; margin-bottom:16px; }
.apresentacao-tag.tag-vilao{ background: var(--vermelho); }
.apresentacao-tag.tag-especial{ background: linear-gradient(90deg, var(--laranja), var(--amarelo)); color:#3a2200; }
.apresentacao-tag.tag-heroi{ background: var(--verde); }

/* ---------- card de detalhe do personagem (Minha Turminha) ---------- */
.pecas-bloco{ text-align:left; margin-bottom:14px; }
.pecas-titulo{ font-weight:800; font-size:.85rem; color: var(--amarelo); margin-bottom:8px; }
.pecas-lista{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.pecas-lista li{ font-size:.85rem; background: rgba(255,255,255,.06); padding:8px 10px; border-radius:10px; }
.pecas-lista li i{ opacity:.7; font-style:italic; }
.pecas-lista li.peca-ok{ color: var(--verde); }
.pecas-dica{ font-size:.82rem; line-height:1.5; opacity:.85; background: rgba(255,255,255,.06); padding:10px 12px; border-radius:12px; margin:0; }

.escondido{ display:none !important; }

/* ---------- selo "criado por axin.com.br" (aparece em todas as telas) ----------
   Nas telas de menu ele é um elemento normal, no fim do conteúdo (nunca cobre
   um botão). Só na tela do jogo ele flutua, ancorado acima dos controles de
   toque, onde já sabemos que sempre há espaço livre. */
.credito-axin{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(0,0,0,.5);
  padding:4px 12px 4px 5px;
  border-radius:999px;
  text-decoration:none;
  color: rgba(255,244,226,.8);
  font-size:.62rem;
  font-weight:700;
  white-space:nowrap;
  opacity:.68;
  transition: opacity .15s ease, transform .1s ease;
  border: 1px solid rgba(255,255,255,.12);
  flex-shrink:0;
}
.credito-axin:hover, .credito-axin:active{ opacity:1; }
.credito-axin:active{ transform: scale(.96); }
.credito-axin img{ height:16px; width:auto; display:block; border-radius:4px; }

.credito-axin-linha{
  display:flex; justify-content:center; flex-shrink:0;
  margin-top:10px; padding-top:8px;
}

/* na tela do jogo o selo fica bem pequeno, coladinho no topo, entre o HUD
   e a borda da tela — não disputa espaço com vidas/moedas (esquerda) nem
   com o título/pause (direita), e nunca cobre os controles de toque. */
.credito-axin--jogo{
  position:absolute; left:50%; transform:translateX(-50%);
  top: max(3px, env(safe-area-inset-top));
  bottom:auto;
  z-index:7;
  padding:2px 9px 2px 3px;
  font-size:.5rem;
  gap:4px;
  opacity:.5;
}
.credito-axin--jogo img{ height:11px; }
.credito-axin--jogo:hover, .credito-axin--jogo:active{ opacity:.9; }
.credito-axin--jogo:active{ transform: translateX(-50%) scale(.94); }

/* em telas bem estreitas, encolhe o selo pra não disputar espaço com nada */
@media (max-width: 380px){
  .credito-axin span{ display:none; }
  .credito-axin{ padding:4px 8px 4px 4px; }
}

@media (min-width:640px){
  .tecla{ width:70px; height:70px; }
  .tecla-pular{ width:86px; height:86px; }
}

/* ===================== PWA: banner de atualização + botão de instalar ===================== */
.banner-atualizacao{
  position:fixed; left:50%; top:0; transform:translate(-50%,0);
  z-index:50; max-width:min(92vw,420px); width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(135deg,#ff7a1a,#e85d00);
  color:#fff4e2; font-weight:700; font-size:.82rem;
  padding:10px 10px 10px 16px; border-radius:0 0 16px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  animation:banner-desce .25s ease-out;
}
.banner-atualizacao.escondida{ display:none; }
.banner-atualizacao span{ flex:1; line-height:1.25; }
.btn-atualizar-agora{
  flex-shrink:0; border:none; border-radius:999px; cursor:pointer;
  background:#1c1712; color:#ffcf3d; font-weight:800; font-size:.78rem;
  padding:8px 14px; white-space:nowrap;
}
.btn-atualizar-agora:active{ transform:scale(.95); }
@keyframes banner-desce{
  from{ transform:translate(-50%,-100%); opacity:0; }
  to{ transform:translate(-50%,0); opacity:1; }
}

.btn-instalar-jogo{
  position:fixed; right:14px; bottom:14px; z-index:40;
  border:none; border-radius:999px; cursor:pointer;
  background:linear-gradient(135deg,#ff7a1a,#e85d00); color:#fff4e2;
  font-weight:800; font-size:.8rem; padding:11px 16px;
  box-shadow:0 8px 18px rgba(0,0,0,.4);
  animation:banner-sobe .25s ease-out;
}
.btn-instalar-jogo.escondida{ display:none; }
.btn-instalar-jogo:active{ transform:scale(.95); }
@keyframes banner-sobe{
  from{ transform:translateY(30px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}