/* ─────────────────────────────────────────────
   BATALHA — arquivo separado
   Mantém o duelo fora do CSS da fazenda.
───────────────────────────────────────────── */

.pokemon-modal {
  align-items: center;
}

.pokemon-battle {
  width: min(920px, calc(100vw - 42px));
  border: 5px solid var(--wood-900);
  outline: 3px solid rgba(240, 200, 64, .40);
  outline-offset: -10px;
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 240, 106, .18), transparent 34%),
    linear-gradient(180deg, rgba(93, 150, 86, .96) 0 44%, rgba(121, 91, 48, .98) 44% 100%);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.40),
    10px 10px 0 rgba(0,0,0,.44);
  overflow: hidden;
}

.pokemon-field {
  position: relative;
  height: clamp(360px, 54vh, 510px);
  background:
    linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.08)),
    radial-gradient(ellipse at 74% 38%, rgba(43, 21, 8, .43), transparent 24%),
    radial-gradient(ellipse at 25% 78%, rgba(43, 21, 8, .45), transparent 26%),
    url("../assets/backgrounds/battle_bg.png") center / cover no-repeat,
    url("../assets/backgrounds/farm_bg.png") center / cover no-repeat,
    linear-gradient(180deg, #5d9656, #4e824d 43%, #976c36 44%, #795b30);
  overflow: hidden;
}

.pokemon-field::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .20;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.12) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.10) 25%, transparent 25%);
  background-size: 38px 38px;
  animation: pokemonFieldDrift 9s linear infinite;
}

.pokemon-field.is-dramatic {
  animation: arenaPulse .55s ease-in-out 2;
}

.pokemon-field.is-meowmere {
  animation: meowmereArena .75s ease-in-out 2;
}

.pokemon-hud {
  position: absolute;
  z-index: 4;
  width: min(350px, 44%);
  border: 4px solid var(--wood-900);
  background: rgba(255, 231, 174, .96);
  color: #2b1508;
  padding: 10px 12px;
  box-shadow: 5px 5px 0 rgba(0,0,0,.35);
}

.pokemon-hud--enemy { left: 24px; top: 22px; }
.pokemon-hud--player { right: 24px; bottom: 22px; }

.pokemon-hud__name {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1;
}

.pokemon-hp {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.pokemon-hp__hp-label {
  display: inline-block;
  margin-right: 7px;
  color: #4c2811;
  font-size: 18px;
}

.pokemon-hp__bar {
  height: 16px;
  border: 3px solid #2b1508;
  background: #1b0d05;
  overflow: hidden;
}

.pokemon-hp__fill {
  width: var(--hp, 100%);
  height: 100%;
  background: linear-gradient(90deg, #76e35b, #f4d04c);
  transition: width .52s cubic-bezier(.2,.8,.2,1);
}

.pokemon-hp__fill.is-danger {
  background: linear-gradient(90deg, #ff6b6b, #f4d04c);
  animation: dangerBlink .5s steps(1, end) infinite;
}

.pokemon-hp__text {
  margin-top: 4px;
  text-align: right;
  font-size: 18px;
  line-height: 1;
  color: #4c2811;
}

.pokemon-platform {
  position: absolute;
  z-index: 2;
  width: 310px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(43, 21, 8, .54), rgba(43, 21, 8, .10) 68%, transparent 70%);
}

.pokemon-platform--enemy {
  right: 76px;
  top: 224px;
  width: 256px;
  height: 54px;
  border: 4px solid #2b1508;
  border-radius: 18px 18px 44px 44px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px),
    linear-gradient(90deg, #7e2f66, #d58ab2 22%, #f0c36b 50%, #d58ab2 78%, #7e2f66);
  box-shadow:
    inset 0 5px 0 rgba(255,255,255,.18),
    inset 0 -6px 0 rgba(43,21,8,.22),
    0 12px 0 rgba(0,0,0,.16),
    0 0 16px rgba(240, 195, 107, .34);
  animation: flyingCarpetFloat 1.7s ease-in-out infinite;
}

.pokemon-platform--enemy::before,
.pokemon-platform--enemy::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 18px;
  height: 30px;
  background:
    linear-gradient(#f0c36b 0 5px, transparent 5px 9px) 0 0 / 100% 9px repeat-y;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.30));
}

.pokemon-platform--enemy::before { left: -20px; }
.pokemon-platform--enemy::after { right: -20px; }

.pokemon-platform--player { left: 66px; bottom: 64px; }

.pokemon-sprite {
  position: absolute;
  z-index: 3;
  image-rendering: pixelated;
  filter: drop-shadow(4px 6px 0 rgba(0,0,0,.34));
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;
}

.pokemon-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.pokemon-sprite--enemy {
  width: 128px;
  height: 128px;
  right: 143px;
  top: 111px;
  animation: pokemonEnemyIdle 1.8s ease-in-out infinite;
}

.pokemon-sprite--player-diego,
.pokemon-sprite--player-melissa {
  width: 108px;
  height: 108px;
  bottom: 91px;
}

.pokemon-sprite--player-diego {
  left: 128px;
  animation: pokemonPlayerIdle 1.8s ease-in-out infinite;
}

.pokemon-sprite--player-melissa {
  left: 202px;
  bottom: 98px;
  animation: pokemonPlayerIdle 1.8s ease-in-out .14s infinite;
}

.pokemon-sprite.is-hit { animation: pokemonHit .42s linear; }
.pokemon-sprite.is-attack {
  filter: brightness(1.25) drop-shadow(0 0 11px rgba(255, 240, 106, .72)) drop-shadow(4px 6px 0 rgba(0,0,0,.34));
}
.pokemon-sprite.is-low {
  opacity: .82;
  filter: grayscale(.25) drop-shadow(4px 6px 0 rgba(0,0,0,.34));
}

.attack-fx {
  position: absolute;
  z-index: 7;
  width: 58px;
  height: 58px;
  left: var(--from-x, 50%);
  top: var(--from-y, 50%);
  pointer-events: none;
  image-rendering: pixelated;
  animation: attackFly .62s ease-in forwards;
}

.attack-fx img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 10px rgba(255, 240, 106, .75))
    drop-shadow(3px 4px 0 rgba(0,0,0,.35));
}

.attack-fx--support { animation: supportBurst .74s ease-out forwards; }
.attack-fx--meowmere {
  width: 70px;
  height: 70px;
  animation: meowmereSlash .82s cubic-bezier(.2,.9,.1,1) forwards;
}

.meowmere-trail {
  position: absolute;
  z-index: 6;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: var(--x);
  top: var(--y);
  background: hsl(var(--hue), 95%, 72%);
  box-shadow: 0 0 12px hsl(var(--hue), 95%, 72%);
  pointer-events: none;
  animation: trailFade .72s ease-out forwards;
}

.damage-pop {
  position: absolute;
  z-index: 8;
  left: var(--x, 50%);
  top: var(--y, 50%);
  color: #fff06a;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1;
  text-shadow:
    2px 0 0 #2b1508,
    -2px 0 0 #2b1508,
    0 2px 0 #2b1508,
    0 -2px 0 #2b1508,
    4px 4px 0 rgba(0,0,0,.42);
  pointer-events: none;
  animation: damagePop .78s ease-out forwards;
}

.pokemon-bottom {
  display: grid;
  grid-template-columns: 1fr minmax(350px, 43%);
  gap: 12px;
  padding: 14px;
  background: rgba(58, 38, 16, .98);
  border-top: 5px solid var(--wood-900);
}

.pokemon-textbox {
  min-height: 132px;
  border: 5px solid var(--wood-900);
  background: rgba(18, 8, 6, .88);
  color: var(--cream-100);
  padding: 14px 16px;
  font-size: clamp(23px, 2.35vw, 33px);
  line-height: 1.12;
  text-shadow: 3px 3px 0 var(--shadow-hard);
}

.pokemon-textbox::after {
  content: "▼";
  display: inline-block;
  margin-left: 7px;
  color: var(--gold-500);
  animation: typingCursorBlink .8s steps(1, end) infinite;
}

.pokemon-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pokemon-attack {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border: 4px solid var(--wood-900);
  background: var(--gold-500);
  color: var(--wood-900);
  padding: 5px 9px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
}

.pokemon-attack:hover,
.pokemon-attack:focus-visible {
  outline: none;
  background: var(--gold-300);
}

.pokemon-attack[disabled] {
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.35);
}

.pokemon-attack img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.22));
}

.pokemon-attack strong {
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: .95;
  text-align: left;
}

.pokemon-attack span {
  font-size: 17px;
  opacity: .72;
}

.skill-check {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 118px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 46px));
  border: 5px solid var(--wood-900);
  background: rgba(18, 8, 6, .92);
  box-shadow:
    0 0 0 3px rgba(240, 200, 64, .26),
    7px 7px 0 rgba(0,0,0,.35);
  padding: 13px 16px 16px;
  color: var(--cream-100);
  text-align: center;
}

.skill-check__title {
  margin: 0 0 9px;
  color: var(--gold-300);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1;
  text-shadow: 2px 2px 0 var(--shadow-hard);
}

.skill-check__track {
  position: relative;
  height: 28px;
  border: 4px solid var(--wood-900);
  background: rgba(255,255,255,.10);
  overflow: hidden;
}

.skill-check__zone {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  width: 16%;
  background: rgba(118, 227, 91, .78);
  box-shadow: 0 0 15px rgba(118, 227, 91, .45);
}

.skill-check__marker {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 6px;
  left: 0%;
  background: #fff06a;
  box-shadow: 0 0 12px rgba(255, 240, 106, .72);
}

.skill-check__hint {
  margin: 8px 0 10px;
  color: var(--cream-300);
  font-size: 20px;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--shadow-hard);
}

.skill-check__button {
  min-height: 44px;
  border: 4px solid var(--wood-900);
  background: var(--gold-500);
  color: var(--wood-900);
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  padding: 0 18px;
  font-size: 24px;
}

.alien-popup {
  position: fixed;
  z-index: 95;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(8, 3, 1, .56);
}

.alien-popup__card {
  width: min(650px, calc(100vw - 42px));
  border: 5px solid var(--wood-900);
  outline: 3px solid rgba(151, 255, 151, .38);
  outline-offset: -10px;
  background:
    radial-gradient(circle at 50% 0%, rgba(118, 227, 91, .22), transparent 48%),
    rgba(58, 38, 16, .98);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.42),
    0 0 28px rgba(118, 227, 91, .28),
    10px 10px 0 rgba(0,0,0,.44);
  padding: 28px;
  text-align: center;
}

.alien-popup__sprite {
  display: block;
  width: clamp(90px, 13vw, 148px);
  height: clamp(90px, 13vw, 148px);
  object-fit: contain;
  image-rendering: pixelated;
  margin: 0 auto 12px;
  filter:
    drop-shadow(0 0 16px rgba(118, 227, 91, .55))
    drop-shadow(4px 6px 0 rgba(0,0,0,.38));
  animation: alienBob 1.2s ease-in-out infinite;
}

.alien-popup__emoji {
  display: block;
  font-size: clamp(62px, 8vw, 96px);
  line-height: 1;
  margin-bottom: 10px;
  animation: alienBob 1.2s ease-in-out infinite;
}

.alien-popup__text {
  color: var(--cream-100);
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.16;
  text-shadow: 3px 3px 0 var(--shadow-hard);
  margin: 0 0 18px;
}

.alien-popup__note {
  color: var(--green-400);
  font-size: clamp(21px, 2.2vw, 29px);
  line-height: 1.05;
  text-shadow: 2px 2px 0 var(--shadow-hard);
  margin: 0 0 18px;
}

@keyframes flyingCarpetFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes pokemonFieldDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 76px 38px, -76px 38px; }
}

@keyframes pokemonEnemyIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes pokemonPlayerIdle {
  0%, 100% { transform: translateY(0) scaleX(-1); }
  50% { transform: translateY(-5px) scaleX(-1); }
}

@keyframes pokemonHit {
  0%, 100% { transform: translateX(0); opacity: 1; }
  20% { transform: translateX(-12px); opacity: .70; }
  40% { transform: translateX(10px); opacity: 1; }
  60% { transform: translateX(-8px); opacity: .75; }
  80% { transform: translateX(6px); opacity: 1; }
}

@keyframes attackFly {
  0% {
    transform: translate(-50%, -50%) scale(.75) rotate(-12deg);
    opacity: 0;
  }
  18% { opacity: 1; }
  100% {
    left: var(--to-x, 50%);
    top: var(--to-y, 50%);
    transform: translate(-50%, -50%) scale(1.18) rotate(12deg);
    opacity: 0;
  }
}

@keyframes meowmereSlash {
  0% {
    transform: translate(-50%, -50%) scale(.65) rotate(-35deg);
    opacity: 0;
  }
  12% { opacity: 1; }
  72% {
    left: var(--to-x, 50%);
    top: var(--to-y, 50%);
    transform: translate(-50%, -50%) scale(1.32) rotate(28deg);
    opacity: 1;
  }
  100% {
    left: var(--to-x, 50%);
    top: var(--to-y, 50%);
    transform: translate(-50%, -50%) scale(.9) rotate(38deg);
    opacity: 0;
  }
}

@keyframes supportBurst {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.9) rotate(18deg); opacity: 0; }
}

@keyframes trailFade {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  25% { opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

@keyframes damagePop {
  0% { transform: translate(-50%, 8px) scale(.7); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, -46px) scale(1.08); opacity: 0; }
}

@keyframes meowmereArena {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(1.35) saturate(1.5) hue-rotate(60deg); }
}

@keyframes arenaPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.28) saturate(1.25); }
}

@keyframes dangerBlink {
  0%, 55% { filter: brightness(1); }
  56%, 100% { filter: brightness(1.55); }
}

@keyframes alienBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@media (max-width: 760px) {
  .pokemon-bottom { grid-template-columns: 1fr; }
  .pokemon-hud { width: min(300px, 56%); }
  .pokemon-sprite--enemy { right: 65px; }
  .pokemon-sprite--player-diego { left: 72px; }
  .pokemon-sprite--player-melissa { left: 138px; }
}