/* ============================================================
   STYLE.CSS — Estética RPG retrô (JRPG antigo)
   Paleta: masmorra escura (roxos/azuis profundos), bordas NES,
   texto verde/âmbar, dourado para vitória, vermelho para dano.
   ============================================================ */

/* ---------- Reset e base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-escuro: #0a0a0f;
  --bg-masmorra: #16161f;
  --bg-painel: #1f1f2b;
  --borda: #3a3a4a;
  --borda-clara: #5a5a70;
  --borda-escura: #14141c;
  --verde: #5fd75f;
  --amber: #e8a83a;
  --dourado: #f0c020;
  --vermelho: #e63946;
  --azul: #5ec0e8;
  --texto: #d4d4d8;
  --pedra: #2a2a38;
}

html, body {
  height: 100%;
  background: var(--bg-escuro);
  color: var(--texto);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  overflow: hidden;
}

body {
  background-color: var(--bg-escuro);
  background-image:
    /* textura de pedra: pontos esparsos chapados */
    radial-gradient(circle at 12% 18%, #1c1c28 1.5px, transparent 2px),
    radial-gradient(circle at 78% 33%, #1c1c28 1.5px, transparent 2px),
    radial-gradient(circle at 45% 72%, #1c1c28 1.5px, transparent 2px),
    radial-gradient(circle at 88% 85%, #1c1c28 1.5px, transparent 2px),
    radial-gradient(circle at 30% 50%, #1c1c28 1.5px, transparent 2px);
  background-size: 96px 96px;
}

/* ---------- Telas (show/hide com fade) ---------- */
#app {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.tela {
  display: none;
  width: 100%;
  height: 100%;
  padding: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease;
}

.tela.ativa { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Tipografia ---------- */
.titulo-jogo {
  font-family: 'Press Start 2P', monospace;
  font-size: 2.6rem;
  color: var(--dourado);
  text-align: center;
  line-height: 1.5;
  text-shadow:
    3px 3px 0 var(--borda-escura),
    6px 6px 0 #000;
  margin-bottom: 6px;
  animation: tituloEntra 0.8s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes tituloEntra {
  from { opacity: 0; transform: translateY(-30px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Glow sutil só no dourado (não roxo) */
@keyframes glowPulse {
  0%, 100% { text-shadow: 3px 3px 0 var(--borda-escura), 6px 6px 0 #000; }
  50%      { text-shadow: 3px 3px 0 var(--borda-escura), 6px 6px 0 #000, 0 0 20px rgba(240,192,32,0.5); }
}

.subtitulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  color: var(--azul);
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.titulo-tela {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem;
  color: var(--verde);
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 #000;
}

.texto-corrido {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  line-height: 1.5;
  max-width: 760px;
  text-align: left;
}

.texto-corrido p { margin-bottom: 10px; }

.texto-grande {
  font-family: 'VT323', monospace;
  font-size: 1.7rem;
  margin: 10px 0;
  text-align: center;
}

.destaque { color: var(--amber); font-weight: bold; }
.amarelo { color: var(--dourado); font-weight: bold; }
.dourado { color: var(--dourado); }
.vermelho { color: var(--vermelho); }

/* ---------- Botões ---------- */
.btn-rpg {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.8rem;
  color: var(--verde);
  background: var(--bg-painel);
  border: none;
  /* Borda pixelada em degraus (4 tons) — sem gradient suave */
  box-shadow:
    0 -4px 0 var(--borda-clara),
    0 4px 0 var(--borda-escura),
    -4px 0 0 var(--borda),
    4px 0 0 var(--borda),
    inset 0 0 0 2px var(--borda),
    4px 4px 0 #000;
  padding: 14px 22px;
  margin: 8px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), color 0.1s;
  letter-spacing: 1px;
  image-rendering: pixelated;
}

.btn-rpg:hover {
  color: var(--dourado);
  transform: translate(-2px, -2px);
  box-shadow:
    0 -4px 0 var(--borda-clara),
    0 4px 0 var(--borda-escura),
    -4px 0 0 var(--borda),
    4px 0 0 var(--borda),
    inset 0 0 0 2px var(--dourado),
    6px 6px 0 #000;
}

.btn-rpg:active {
  transform: translate(2px, 2px);
  box-shadow:
    0 -2px 0 var(--borda-clara),
    0 2px 0 var(--borda-escura),
    -2px 0 0 var(--borda),
    2px 0 0 var(--borda),
    inset 0 0 0 2px var(--borda),
    2px 2px 0 #000;
}

.btn-grande {
  font-size: 0.95rem;
  padding: 18px 28px;
  display: block;
  width: 320px;
}

#tela-menu {
  background-image: url('../img/bg1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Vinheta que esmaece as bordas do background misturando ao fundo escuro */
#tela-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(10,10,15,0.85) 80%, var(--bg-escuro) 100%);
  pointer-events: none;
}

#tela-menu > .capa { position: relative; z-index: 1; }

.capa {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.logo-menu {
  max-width: 560px;
  width: 90%;
  image-rendering: pixelated;
  margin-bottom: 4px;
  filter: drop-shadow(4px 4px 0 #000) drop-shadow(0 0 20px rgba(240,192,32,0.3));
  animation: tituloEntra 0.8s cubic-bezier(.34,1.56,.64,1) both;
}
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.menu-botoes {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Entrada escalonada (stagger) dos botões do menu */
.menu-botoes .btn-rpg {
  animation: btnEntra 0.5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.menu-botoes .btn-rpg:nth-child(1) { animation-delay: 0.20s; }
.menu-botoes .btn-rpg:nth-child(2) { animation-delay: 0.32s; }
.menu-botoes .btn-rpg:nth-child(3) { animation-delay: 0.44s; }

@keyframes btnEntra {
  from { opacity: 0; transform: translateY(26px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.recorde-menu {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--amber);
  margin-top: 26px;
}

.btn-som {
  position: fixed;
  top: 14px;
  right: 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--azul);
  background: var(--bg-painel);
  border: 2px solid var(--borda);
  padding: 8px 10px;
  cursor: pointer;
  z-index: 9500;
}

/* ---------- Paineis (Como Jogar, Códex, etc.) ---------- */
.painel {
  background: var(--bg-masmorra);
  border: none;
  /* Borda dupla estilo NES, cores chapadas */
  box-shadow:
    0 0 0 4px var(--borda),
    0 0 0 6px var(--bg-masmorra),
    0 0 0 10px var(--borda-clara),
    8px 8px 0 #000;
  padding: 30px 36px;
  max-width: 860px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
}

.painel h2 { margin-bottom: 20px; }

/* Scrollbar retrô */
.painel::-webkit-scrollbar { width: 12px; }
.painel::-webkit-scrollbar-track { background: var(--bg-escuro); }
.painel::-webkit-scrollbar-thumb { background: var(--borda); border: 2px solid var(--borda-clara); }

/* ---------- Códex ---------- */
.codex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 100%;
}

.codex-secao {
  background: var(--bg-escuro);
  border: 2px solid var(--borda);
  padding: 16px 18px;
}

.codex-secao h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--amber);
  margin-bottom: 12px;
  border-bottom: 2px solid var(--borda);
  padding-bottom: 8px;
}

.codex-secao p {
  font-size: 1.15rem;
  line-height: 1.45;
  margin-bottom: 9px;
}

.codex-secao b { color: var(--verde); }
.codex-secao i { color: var(--azul); }

.dica-codex {
  background: rgba(232,168,58,0.1);
  border-left: 4px solid var(--amber);
  padding: 10px 12px !important;
}

/* ============================================================
   TELA DE BATALHA
   ============================================================ */

#tela-batalha {
  padding: 12px;
  justify-content: flex-start;
}

/* HUD superior */
.hud-topo {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.chefao-info {
  flex: 1;
}

.chefao-nome {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--vermelho);
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 #000;
}

.barra-vida {
  position: relative;
  width: 100%;
  max-width: 420px;
  height: 26px;
  background: #1a0606;
  border: none;
  box-shadow:
    0 0 0 3px var(--borda),
    inset 0 0 0 2px #000;
}

.preenchimento-chefao {
  height: 100%;
  width: 100%;
  /* Vermelho chapado em 3 tons (pixel art) — sem gradient suave */
  background:
    linear-gradient(180deg,
      #ff6b6b 0%, #ff6b6b 33%,
      #e63946 33%, #e63946 66%,
      #a01828 66%, #a01828 100%);
  transition: width 0.55s cubic-bezier(.2,.8,.2,1);
}

/* Flash dourado na barra ao sofrer dano */
.barra-vida.drenou .preenchimento-chefao {
  animation: barraDrenou 0.55s ease-out;
}
@keyframes barraDrenou {
  0%   { box-shadow: 0 0 16px rgba(255,255,255,0.9); }
  100% { box-shadow: none; }
}

.barra-texto {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.hud-jogador {
  text-align: right;
  min-width: 160px;
}

.rotulo-hud {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--borda-clara);
  margin-top: 6px;
}

.pontos {
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  color: var(--amber);
  transition: transform 0.18s cubic-bezier(.34,1.56,.64,1);
  display: inline-block;
}

.vidas {
  font-size: 1.8rem;
  letter-spacing: 2px;
  transition: transform 0.2s;
}

/* Pulso de perigo quando HP == 1 */
.vidas.perigo {
  animation: pulsePerigo 0.75s ease-in-out infinite;
}
@keyframes pulsePerigo {
  0%, 100% { filter: none; transform: scale(1); }
  50%      { filter: drop-shadow(0 0 10px #ff3b3b); transform: scale(1.12); }
}

/* Coração "recém-perdido" salta */
.vidas.tremor { animation: tremaVidas 0.4s ease; }
@keyframes tremaVidas {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) scale(1.15); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* Arena + sprite */
.arena {
  width: 100%;
  max-width: 960px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 160px;
  margin: 6px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Vinheta que esmaece as bordas do background (sem afetar o sprite) */
.arena::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,15,0.75) 82%, var(--bg-escuro) 100%);
  pointer-events: none;
}

.sprite-chefao {
  font-size: 9rem;
  line-height: 1;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7));
  animation: idle 6s ease-in-out infinite;
  user-select: none;
  position: relative;
  z-index: 1;
}

/* Imagem do chefão */
.img-chefao {
  max-height: 220px;
  max-width: 280px;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.8));
}

.sprite-emoji-fallback {
  font-size: 8rem;
}

@keyframes idle {
  0%   { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateX(-18px) translateY(-14px) rotate(-3deg) scale(1.03); }
  40%  { transform: translateX(-12px) translateY(6px) rotate(-2deg) scale(0.98); }
  60%  { transform: translateX(18px) translateY(-14px) rotate(3deg) scale(1.03); }
  80%  { transform: translateX(12px) translateY(6px) rotate(2deg) scale(0.98); }
  100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

/* Flash branco + squash & stretch ao tomar dano (game feel) — esticada e volta rápido */
.sprite-chefao.dano {
  animation: squashHit 0.45s cubic-bezier(.2,.9,.3,1) !important;
}

@keyframes squashHit {
  0%   { transform: scale(1,1); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7)) brightness(1); }
  10%  { transform: scale(0.55, 1.55); filter: drop-shadow(0 0 30px #fff) brightness(3.8); }
  25%  { transform: scale(1.55, 0.50); filter: drop-shadow(0 0 24px #fff) brightness(2.8); }
  50%  { transform: scale(0.80, 1.28); filter: brightness(1.3); }
  75%  { transform: scale(1.12, 0.92); filter: brightness(1.1); }
  100% { transform: scale(1,1); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7)) brightness(1); }
}

/* Antecipação: chefão "investe" ao lançar a frase */
.sprite-chefao.ataque {
  animation: ataqueChefao 0.6s ease !important;
}
@keyframes ataqueChefao {
  0%   { transform: translateY(0) scale(1,1) rotate(0deg); }
  30%  { transform: translateY(14px) scale(1.12, 0.88) rotate(-2deg); }
  60%  { transform: translateY(-12px) scale(0.90, 1.14) rotate(3deg); }
  100% { transform: translateY(0) scale(1,1) rotate(0deg); }
}

/* Número de dano flutuante */
.numero-dano {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  color: var(--dourado);
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(240,192,32,0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.numero-dano.mostrar {
  animation: flutuarDano 1.1s ease forwards;
}

@keyframes flutuarDano {
  0% { opacity: 0; top: 45%; transform: translateX(-50%) scale(0.5); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.3); }
  70% { opacity: 1; top: 15%; }
  100% { opacity: 0; top: 5%; }
}

/* Shake da tela ao tomar dano (jogador) */
#tela-batalha.shake-jogador {
  animation: shakeJogador 0.5s ease;
}

@keyframes shakeJogador {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-10px, 4px); }
  20% { transform: translate(10px, -4px); }
  30% { transform: translate(-8px, -3px); }
  40% { transform: translate(8px, 3px); }
  50% { transform: translate(-5px, 2px); }
  60% { transform: translate(5px, -2px); }
}

#tela-batalha.dano-jogador {
  filter: brightness(0.4) saturate(1.4);
  transition: filter 0.1s;
}

/* Caixa de diálogo (borda dupla NES) */
.caixa-dialogo {
  width: 100%;
  max-width: 960px;
  background: var(--bg-masmorra);
  border: none;
  /* Borda tripla chapada estilo NES */
  box-shadow:
    0 0 0 3px var(--borda-clara),
    0 0 0 6px var(--bg-masmorra),
    0 0 0 9px var(--borda),
    6px 6px 0 #000;
  padding: 18px 22px;
  min-height: 200px;
}

.fala-chefao {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--vermelho);
  margin-bottom: 10px;
  min-height: 16px;
}

.frase {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: var(--texto);
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.3);
  border-left: 4px solid var(--amber);
  line-height: 1.3;
  animation: fraseEntra 0.4s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes fraseEntra {
  from { opacity: 0; transform: translateX(-18px); border-left-color: #fff; }
  to   { opacity: 1; transform: translateX(0); }
}

.pergunta {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--verde);
  margin-bottom: 12px;
}

.just-pergunta { color: var(--amber); }

/* Opções (menu RPG com marcador ▶) */
.opcoes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opcao {
  font-family: 'VT323', monospace;
  font-size: 1.35rem;
  color: var(--texto);
  background: var(--bg-escuro);
  border: 2px solid var(--borda);
  padding: 10px 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.1s;
  line-height: 1.2;
  animation: opcaoEntra 0.32s cubic-bezier(.2,.8,.2,1) backwards;
}

@keyframes opcaoEntra {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}

.opcao::before {
  content: "▶ ";
  color: var(--borda-clara);
  opacity: 0;
}

.opcao:hover {
  background: var(--bg-painel);
  border-color: var(--dourado);
  color: var(--dourado);
  transform: translateX(4px);
}

.opcao:hover::before { opacity: 1; color: var(--dourado); }

.opcao:disabled {
  cursor: default;
  opacity: 0.7;
}

.opcao.correta {
  background: rgba(76,255,76,0.18);
  border-color: var(--verde);
  color: var(--verde);
}

.opcao.errada {
  background: rgba(255,59,59,0.18);
  border-color: var(--vermelho);
  color: var(--vermelho);
}

/* Explicação / resultado */
.explicacao-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--bg-escuro);
  border: 2px solid var(--borda);
}

.resultado {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.resultado.acerto { color: var(--verde); }
.resultado.erro { color: var(--vermelho); }

.resposta-correta {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--amber);
  margin-bottom: 8px;
}

.explicacao {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--azul);
  line-height: 1.4;
  margin-bottom: 12px;
}

#btn-continuar {
  margin-top: 6px;
}

/* ---------- Telas de vitória parcial / derrota / vitória final ---------- */
.painel-vitoria-parcial,
.painel-derrota,
.painel-vitoria-final {
  text-align: center;
  max-width: 620px;
}

.painel-vitoria-final {
  border-color: var(--dourado);
  box-shadow:
    0 0 0 4px var(--dourado),
    0 0 0 6px var(--bg-masmorra),
    0 0 0 10px #a08010,
    0 0 40px rgba(240,192,32,0.25),
    8px 8px 0 #000;
}

.painel-derrota {
  border-color: var(--vermelho);
  box-shadow:
    0 0 0 4px var(--vermelho),
    0 0 0 6px var(--bg-masmorra),
    0 0 0 10px #80101a,
    0 0 30px rgba(230,57,70,0.2),
    8px 8px 0 #000;
}

/* ---------- Responsividade (projetor / telas menores) ---------- */
@media (max-width: 720px) {
  .titulo-jogo { font-size: 1.4rem; }
  .codex-grid { grid-template-columns: 1fr; }
  .sprite-chefao { font-size: 6rem; }
  .hud-topo { flex-direction: column; }
  .hud-jogador { text-align: left; }
  .barra-vida { max-width: 100%; }
  .frase { font-size: 1.3rem; }
  .btn-grande { width: 100%; }
}

/* ============================================================
   GAME FEEL — Overlays e efeitos de impacto (estilo "Feel")
   ============================================================ */

/* Vinheta de atmosfera (sempre ativa) */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);
}

/* Linhas CRT (sempre ativas, sutis) */
#scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 8001;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.13) 0, rgba(0,0,0,0.13) 1px, transparent 1px, transparent 3px);
  opacity: 0.45;
  animation: flickerCRT 4s infinite;
}
@keyframes flickerCRT {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.38; }
}

/* Canvas de partículas (sparks, corações, confete) */
#fx-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 8500;
}

/* Flash de tela cheia */
#flash-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: #fff; opacity: 0;
}
#flash-overlay.flash-white { animation: flashWhite 0.32s ease-out; }
#flash-overlay.flash-red   { animation: flashRed 0.42s ease-out; }
#flash-overlay.flash-gold  { animation: flashGold 0.55s ease-out; }
@keyframes flashWhite { 0% { opacity: 0; } 15% { opacity: 0.5; } 100% { opacity: 0; } }
@keyframes flashRed   { 0% { opacity: 0; } 18% { opacity: 0.45; background: #e63946; } 100% { opacity: 0; background: #e63946; } }
@keyframes flashGold  { 0% { opacity: 0; } 20% { opacity: 0.4; background: #f0c020; } 100% { opacity: 0; background: #f0c020; } }

/* Hit stop: congela animações CSS por um instante (peso do impacto) */
.hitstop, .hitstop * {
  animation-play-state: paused !important;
  transition: none !important;
}

/* Punch zoom: quick scale no alvo */
.punch-zoom { animation: punchZoom 0.35s cubic-bezier(.2,.8,.2,1); }
@keyframes punchZoom {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.punch-zoom-forte { animation: punchZoomForte 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes punchZoomForte {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Glitch / aberração cromática (RGB split) */
.glitch { animation: glitch 0.34s steps(2); }
@keyframes glitch {
  0%   { filter: none; }
  20%  { filter: drop-shadow(2px 0 0 #ff0040) drop-shadow(-2px 0 0 #00e5ff); transform: translateX(-3px); }
  40%  { filter: drop-shadow(-3px 0 0 #ff0040) drop-shadow(3px 0 0 #00e5ff); transform: translateX(3px); }
  60%  { filter: drop-shadow(1px 0 0 #ff0040) drop-shadow(-1px 0 0 #00e5ff); transform: translateX(-2px); }
  100% { filter: none; transform: translateX(0); }
}

/* Shockwave (anel que expande do impacto) */
.shockwave {
  position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px;
  border: 5px solid #fff; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.9; pointer-events: none;
  animation: shock 0.6s ease-out forwards;
}
.shockwave.ouro { border-color: #ffd700; }
@keyframes shock {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.9; border-width: 6px; }
  100% { transform: translate(-50%,-50%) scale(9); opacity: 0; border-width: 1px; }
}

/* Combo popup */
#combo-display {
  position: fixed; top: 22%; left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace; font-size: 1.3rem;
  color: var(--dourado);
  text-shadow: 2px 2px 0 #000, 0 0 22px rgba(255,215,0,0.85);
  pointer-events: none; opacity: 0; z-index: 8600;
}
#combo-display.show { animation: comboPop 1.1s ease-out forwards; }
@keyframes comboPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3) rotate(-10deg); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.45) rotate(5deg); }
  38%  { transform: translateX(-50%) scale(1) rotate(-2deg); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.1) translateY(-34px); }
}

/* Overlay de HP baixo (pulso vermelho nas bordas) */
#lowhp-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 8200;
  box-shadow: inset 0 0 0 rgba(255,0,0,0); opacity: 0;
}
#lowhp-overlay.ativo {
  animation: lowhpPulse 1.1s ease-in-out infinite;
}
@keyframes lowhpPulse {
  0%, 100% { box-shadow: inset 0 0 30px rgba(255,0,0,0.25); opacity: 0.6; }
  50%      { box-shadow: inset 0 0 90px rgba(255,0,0,0.55); opacity: 1; }
}

/* Splash de texto grande (DERROTADO!, VITÓRIA!, etc.) */
#splash-texto {
  position: fixed; top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 2.6rem; color: var(--dourado);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255,215,0,0.9);
  pointer-events: none; opacity: 0; z-index: 8700;
  text-align: center;
}
#splash-texto.show { animation: splashPop 1.5s cubic-bezier(.2,.8,.2,1) forwards; }
#splash-texto.vermelho { color: var(--vermelho); text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255,59,59,0.9); }
@keyframes splashPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.3); }
  18%  { opacity: 1; transform: translate(-50%,-50%) scale(1.2); }
  30%  { transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}

/* Tremor de tela mais forte (dano ao jogador) — versão intensa */
#tela-batalha.shake-forte { animation: shakeForte 0.5s ease; }
@keyframes shakeForte {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-12px, 6px) rotate(-0.5deg); }
  20% { transform: translate(12px, -6px) rotate(0.5deg); }
  30% { transform: translate(-10px, -4px); }
  40% { transform: translate(10px, 4px); }
  50% { transform: translate(-6px, 3px); }
  60% { transform: translate(6px, -3px); }
  70% { transform: translate(-3px, 2px); }
}

/* Zoom lento no sprite do chefão ao ser derrotado */
.sprite-chefao.derrota {
  animation: derrotaChefao 1s ease-in forwards !important;
}
@keyframes derrotaChefao {
  0%   { transform: scale(1); filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7)) brightness(1); opacity: 1; }
  30%  { transform: scale(1.25) rotate(-6deg); filter: drop-shadow(0 0 30px #fff) brightness(3); }
  100% { transform: scale(0.1) rotate(20deg); filter: brightness(0); opacity: 0; }
}

/* Squash funciona na div .sprite-chefao, que contém a <img> */