/* ═══════════════════════════════════════════════════════════════
   Pokemon Florest — Battle Visual Enhancements
   Efeitos visuais, partículas, HP bar estilizada, animações de golpe
   Complementa styles.css sem quebrar regras existentes
   ═══════════════════════════════════════════════════════════════ */

/* ── Arena de batalha: cenario, plataformas e ancoragem dos sprites ────────
   O cenario do bioma e uma camada opaca que cobre toda a arena (z-index 0), as
   plataformas ovais do terreno ficam por cima dela (z-index 1) e os Pokemon por
   cima de tudo (z-index 2). A base de cada sprite e ancorada no centro da sua
   elipse: --ink-lift, calculado em sizing.js a partir de quanto cada arte e
   transparente, sobe a caixa ate os pes pousarem exatamente nessa linha. */
.battle-stage::before,
.battle-stage::after {
  content: none;
}
.battle-scenery {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #7ba073;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
  transition: background-image 0.6s ease;
}
.battle-scenery::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 18, 12, 0.38) 0%, rgba(5, 18, 12, 0) 30%, rgba(5, 18, 12, 0) 64%, rgba(5, 18, 12, 0.46) 100%);
}
.battle-stage[data-bg="grass"] .battle-scenery,
.battle-stage[data-bg="default"] .battle-scenery { background-image: url('assets/battle/bg/bg-meadow.png'); }
.battle-stage[data-bg="cave"] .battle-scenery { background-image: url('assets/battle/bg/bg-dampcave.png'); }
.battle-stage[data-bg="water"] .battle-scenery { background-image: url('assets/battle/bg/bg-beachshore.png'); }
.battle-stage[data-bg="desert"] .battle-scenery { background-image: url('assets/battle/bg/bg-desert.png'); }
.battle-stage[data-bg="fire"] .battle-scenery { background-image: url('assets/battle/bg/bg-volcanocave.png'); }
.battle-stage[data-bg="ice"] .battle-scenery { background-image: url('assets/battle/bg/bg-icecave.png'); }
.battle-stage[data-bg="forest"] .battle-scenery { background-image: url('assets/battle/bg/bg-forest.png'); }
.battle-stage[data-bg="electric"] .battle-scenery { background-image: url('assets/battle/bg/bg-thunderplains.png'); }
.battle-stage[data-bg="mountain"] .battle-scenery { background-image: url('assets/battle/bg/bg-mountain.png'); }
.battle-stage[data-bg="route"] .battle-scenery { background-image: url('assets/battle/bg/bg-route.png'); }
.battle-stage[data-bg="city"] .battle-scenery { background-image: url('assets/battle/bg/bg-city.png'); }

/* ── Escala da arena ───────────────────────────────────────────────────────
   Plataformas, ponto de repouso e caixa dos sprites usam a mesma unidade (--arena), então a arena
   inteira encolhe junta em telas baixas/estreitas e o sprite nunca sai do centro da plataforma. */
.battle-stage {
  --arena: 1;
}
/* ── Plataformas ovais — cor e textura pelo solo do bioma ────────────────── */
.battle-platform {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background-image: var(--plat-texture, none),
    radial-gradient(ellipse at 50% 34%, var(--plat-hi, #a6d67f) 0%, var(--plat-mid, #63a154) 60%, var(--plat-lo, #2f5a33) 100%);
  box-shadow: 0 0.35rem 0.75rem rgba(5, 17, 12, 0.45), inset 0 -0.28rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.16rem 0.22rem rgba(255, 255, 255, 0.2);
}
.battle-platform.you { left: calc(4.5rem * var(--arena, 1)); bottom: calc(0.9rem * var(--arena, 1)); width: calc(22rem * var(--arena, 1)); height: calc(3rem * var(--arena, 1)); }
.battle-platform.enemy { right: calc(7.1rem * var(--arena, 1)); bottom: calc(8.05rem * var(--arena, 1)); width: calc(17.5rem * var(--arena, 1)); height: calc(2.3rem * var(--arena, 1)); }
/* No Safari o lado do jogador não entra (styles.css esconde o sprite e o card): a plataforma dele vai junto. */
.safari-stage .battle-platform.you { display: none; }
.battle-stage[data-bg="grass"] .battle-platform,
.battle-stage[data-bg="default"] .battle-platform {
  --plat-hi: #a6d67f;
  --plat-mid: #63a154;
  --plat-lo: #2f5a33;
  --plat-texture: repeating-linear-gradient(112deg, rgba(20, 56, 24, 0.32) 0 1px, rgba(20, 56, 24, 0) 1px 5px), repeating-linear-gradient(66deg, rgba(255, 255, 255, 0.13) 0 1px, rgba(255, 255, 255, 0) 1px 7px);
}
.battle-stage[data-bg="forest"] .battle-platform {
  --plat-hi: #8ec06a;
  --plat-mid: #4d8347;
  --plat-lo: #263f27;
  --plat-texture: repeating-linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0 2px, rgba(255, 255, 255, 0) 2px 9px), radial-gradient(circle at 22% 62%, rgba(18, 38, 16, 0.5) 0 4px, rgba(18, 38, 16, 0) 5px), radial-gradient(circle at 74% 30%, rgba(18, 38, 16, 0.42) 0 3px, rgba(18, 38, 16, 0) 4px);
}
.battle-stage[data-bg="electric"] .battle-platform {
  --plat-hi: #c9d47c;
  --plat-mid: #8a9a44;
  --plat-lo: #454c1f;
  --plat-texture: repeating-linear-gradient(100deg, rgba(58, 68, 20, 0.32) 0 1px, rgba(58, 68, 20, 0) 1px 6px), radial-gradient(circle at 68% 44%, rgba(255, 244, 150, 0.4) 0 2px, rgba(255, 244, 150, 0) 3px);
}
.battle-stage[data-bg="cave"] .battle-platform,
.battle-stage[data-bg="mountain"] .battle-platform {
  --plat-hi: #a6afba;
  --plat-mid: #6f7883;
  --plat-lo: #363d45;
  --plat-texture: radial-gradient(circle at 26% 58%, rgba(255, 255, 255, 0.16) 0 3px, rgba(255, 255, 255, 0) 4px), radial-gradient(circle at 62% 34%, rgba(0, 0, 0, 0.36) 0 4px, rgba(0, 0, 0, 0) 5px), radial-gradient(circle at 82% 66%, rgba(0, 0, 0, 0.3) 0 3px, rgba(0, 0, 0, 0) 4px);
}
.battle-stage[data-bg="desert"] .battle-platform {
  --plat-hi: #edd7a2;
  --plat-mid: #c8a967;
  --plat-lo: #8a6f3c;
  --plat-texture: repeating-linear-gradient(96deg, rgba(120, 92, 44, 0.22) 0 1px, rgba(120, 92, 44, 0) 1px 8px), repeating-linear-gradient(2deg, rgba(255, 249, 224, 0.2) 0 1px, rgba(255, 249, 224, 0) 1px 6px);
}
.battle-stage[data-bg="water"] .battle-platform {
  --plat-hi: #ded4b0;
  --plat-mid: #b0a37c;
  --plat-lo: #6b6247;
  --plat-texture: repeating-linear-gradient(178deg, rgba(255, 255, 255, 0.22) 0 2px, rgba(255, 255, 255, 0) 2px 7px), radial-gradient(circle at 30% 70%, rgba(90, 78, 50, 0.3) 0 3px, rgba(90, 78, 50, 0) 4px);
}
.battle-stage[data-bg="fire"] .battle-platform {
  --plat-hi: #9b6152;
  --plat-mid: #5d3a34;
  --plat-lo: #2a1c1b;
  --plat-texture: radial-gradient(circle at 34% 62%, rgba(255, 168, 82, 0.42) 0 3px, rgba(255, 168, 82, 0) 4px), radial-gradient(circle at 70% 38%, rgba(0, 0, 0, 0.44) 0 4px, rgba(0, 0, 0, 0) 5px);
}
.battle-stage[data-bg="ice"] .battle-platform {
  --plat-hi: #eaf7fc;
  --plat-mid: #a9d0e2;
  --plat-lo: #6d95ac;
  --plat-texture: repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.4) 0 1px, rgba(255, 255, 255, 0) 1px 6px), radial-gradient(circle at 66% 58%, rgba(120, 170, 200, 0.35) 0 3px, rgba(120, 170, 200, 0) 4px);
}
/* Rota: terra batida com tufos de grama alta nas bordas. */
.battle-stage[data-bg="route"] .battle-platform {
  --plat-hi: #cbb078;
  --plat-mid: #8f7742;
  --plat-lo: #4a3d21;
  --plat-texture: radial-gradient(ellipse at 9% 62%, rgba(74, 108, 44, 0.6) 0 5px, rgba(74, 108, 44, 0) 6px), radial-gradient(ellipse at 91% 40%, rgba(74, 108, 44, 0.55) 0 4px, rgba(74, 108, 44, 0) 5px), radial-gradient(ellipse at 62% 78%, rgba(74, 108, 44, 0.45) 0 3px, rgba(74, 108, 44, 0) 4px), radial-gradient(circle at 48% 52%, rgba(60, 46, 20, 0.32) 0 3px, rgba(60, 46, 20, 0) 4px);
}
/* Cidade: calçamento em blocos com rejunte escuro. */
.battle-stage[data-bg="city"] .battle-platform {
  --plat-hi: #cdd3d8;
  --plat-mid: #9aa3ab;
  --plat-lo: #59616a;
  --plat-texture: repeating-linear-gradient(0deg, rgba(40, 46, 52, 0.35) 0 1px, rgba(40, 46, 52, 0) 1px 7px), repeating-linear-gradient(90deg, rgba(40, 46, 52, 0.35) 0 1px, rgba(40, 46, 52, 0) 1px 9px), radial-gradient(circle at 30% 64%, rgba(255, 255, 255, 0.2) 0 2px, rgba(255, 255, 255, 0) 3px);
}

/* ── Ancoragem: a base do sprite pousa no centro da plataforma ───────────── */
.battle-sprite {
  z-index: 2;
  max-width: none;
  max-height: none;
}
.battle-sprite.you {
  /* Centro da plataforma do jogador: 4.5rem + 22rem/2 = 15.5rem a partir da esquerda.
     Em porcentagem o sprite acertava no desktop e escapava no celular. O translate
     (propriedade própria, não o transform) recua meia caixa e convive sem briga com o
     espelhamento da classe front-art, que usa transform:scaleX(-1). Sem chaves neste
     comentário: as ferramentas de teste cortam o bloco de regra na primeira chave. */
  left: calc(15.5rem * var(--arena, 1));
  translate: -50% 0;
  bottom: calc(2.4rem * var(--arena, 1) - var(--ink-lift, 0) * 1rem * var(--arena, 1));
}
.battle-sprite.enemy {
  /* Centro da plataforma do inimigo: 7.1rem + 17.5rem/2 = 15.85rem a partir da direita. */
  right: calc(15.85rem * var(--arena, 1));
  translate: 50% 0;
  top: auto;
  bottom: calc(9.2rem * var(--arena, 1) - var(--ink-lift, 0) * 1rem * var(--arena, 1));
}
.battle-sprite.captured-ball {
  /* A pokébola que ficou no lugar do Pokémon após a captura: mesma âncora do
     sprite inimigo, mas com o tamanho de uma bola e sombra para "assentar". */
  width: calc(3.4rem * var(--arena, 1));
  height: calc(3.4rem * var(--arena, 1));
  object-fit: contain;
  filter: drop-shadow(0 0.2rem 0.25rem rgba(0,0,0,0.35));
}
.combat-card {
  z-index: 3;
}

/* ── HP Bar — Gradiente por vida restante ──────────────────── */
.battle-hp-bar {
  height: 8px;
  border-radius: 4px;
  background: #333;
  border: 1px solid #555;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.battle-hp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease-out, background 0.5s ease;
  position: relative;
}
.battle-hp-fill::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px; right: 4px; height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 1px;
}
/* HP colors by percentage */
.battle-hp-fill[data-hp^="6"], .battle-hp-fill[data-hp^="7"],
.battle-hp-fill[data-hp^="8"], .battle-hp-fill[data-hp^="9"],
.battle-hp-fill[data-hp="100"] { background: linear-gradient(90deg, #4CAF50, #66bb6a); }
.battle-hp-fill[data-hp^="3"], .battle-hp-fill[data-hp^="4"],
.battle-hp-fill[data-hp^="5"] { background: linear-gradient(90deg, #FFC107, #FFB300); }
.battle-hp-fill[data-hp^="1"], .battle-hp-fill[data-hp^="2"],
.battle-hp-fill[data-hp^="0"] { background: linear-gradient(90deg, #f44336, #ef5350); }
/* Low HP pulse */
.battle-hp-fill[data-hp^="1"], .battle-hp-fill[data-hp^="2"],
.battle-hp-fill[data-hp^="0"] {
  animation: hpLowPulse 0.8s ease-in-out infinite;
}
@keyframes hpLowPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* ── HP Number display ─────────────────────────────────────── */
.battle-hp-text {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
  transition: color 0.3s ease;
}
.battle-hp-text[data-hp^="6"], .battle-hp-text[data-hp^="7"],
.battle-hp-text[data-hp^="8"], .battle-hp-text[data-hp^="9"],
.battle-hp-text[data-hp="100"] { color: #a5d6a7; }
.battle-hp-text[data-hp^="4"], .battle-hp-text[data-hp^="5"] { color: #ffe082; }
.battle-hp-text[data-hp^="2"], .battle-hp-text[data-hp^="3"] { color: #ffab91; }
.battle-hp-text[data-hp^="1"], .battle-hp-text[data-hp^="0"] { color: #ef9a9a; animation: hpLowPulse 0.8s ease-in-out infinite; }

/* ── Sprite Animations ─────────────────────────────────────── */
/* Entrance: flash-in. The flash is a filter, and so is the partner's variety tint (styles.css):
   an animated filter replaces the tint for the whole run, so the colour switched off and back
   every time the stage was (re)built. The tinted partner therefore gets an opacity-only
   entrance -- no filter is animated there, so its colour never changes -- while everyone else
   (the enemy, an untinted partner) keeps the flash. */
.battle-sprite-entering {
  animation: battleEntrance 0.45s ease-out;
}
.battle-sprite-entering.you:not(.front-art)[data-variety="ancient"],
.battle-sprite-entering.you:not(.front-art)[data-variety="metallic"],
.battle-sprite-entering.you:not(.front-art)[data-variety="mystic"],
.battle-sprite-entering.you:not(.front-art)[data-variety="shadow"] {
  animation-name: battleEntranceFade;
}
@keyframes battleEntrance {
  0%   { opacity: 0; filter: brightness(2.5) blur(3px); }
  60%  { opacity: 0.9; filter: brightness(1.1) blur(0); }
  100% { opacity: 1; filter: brightness(1) blur(0); }
}
/* The tinted partner fades in without touching the filter that carries its variety colour. */
@keyframes battleEntranceFade {
  0%   { opacity: 0; }
  60%  { opacity: 0.9; }
  100% { opacity: 1; }
}

/* Gentle idle pulse on the stage itself (subtle) */
.battle-stage .battle-sprite {
  transition: filter 0.3s ease;
}

/* ── Move Buttons — Category icons ─────────────────────────── */
.battle-move-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
  backdrop-filter: blur(4px);
}
.battle-move-btn:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.battle-move-btn:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}
.battle-move-btn.disabled, .battle-move-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.battle-move-btn .move-category-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.battle-move-btn .move-type-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: auto;
}
.battle-move-btn .move-info {
  flex: 1;
  min-width: 0;
}
.battle-move-btn .move-name { font-size: 14px; line-height: 1.2; }
.battle-move-btn .move-meta {
  font-size: 10px;
  opacity: 0.6;
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* ── Type Effectiveness Popup ───────────────────────────────── */
.battle-effectiveness {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 900;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 100;
  animation: effPop 1.2s ease-out forwards;
}
.battle-effectiveness.super   { color: #76ff03; }
.battle-effectiveness.weak    { color: #ff9100; }
.battle-effectiveness.immune  { color: #757575; }
@keyframes effPop {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  40%  { transform: translate(-50%, -50%) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.8); }
}

/* ── Elemental Move FX overlay (fireball, lightning, etc.) ─── */
.battle-move-fx {
  position: absolute;
  width: 80px; height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 50;
  animation: moveFX 0.6s ease-out forwards;
}
@keyframes moveFX {
  0%   { opacity: 0; transform: translateY(0) scale(0.3); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ── Impact Particles ────────────────────────────────────────── */
.battle-particle {
  position: absolute;
  pointer-events: none;
  z-index: 60;
  animation: particleFly 0.8s ease-out forwards;
}
@keyframes particleFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}

/* ── Status Effect Overlay ──────────────────────────────────── */
.battle-status-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.battle-status-overlay.active {
  opacity: 0.4;
  animation: statusPulse 1.5s ease-in-out infinite;
}
.battle-status-overlay.poison   { background: radial-gradient(ellipse at center, rgba(163, 62, 235, 0.3), transparent 70%); }
.battle-status-overlay.burn     { background: radial-gradient(ellipse at center, rgba(255, 120, 30, 0.3), transparent 70%); }
.battle-status-overlay.paralysis { background: radial-gradient(ellipse at center, rgba(255, 220, 40, 0.25), transparent 70%); }
.battle-status-overlay.freeze   { background: radial-gradient(ellipse at center, rgba(100, 200, 255, 0.3), transparent 70%); }
.battle-status-overlay.sleep    { background: radial-gradient(ellipse at center, rgba(160, 160, 220, 0.25), transparent 70%); }
@keyframes statusPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.5; }
}

/* ── Damage Number Floating ─────────────────────────────────── */
.battle-damage-num {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 28px;
  font-weight: 900;
  color: #ff4444;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.7), 0 0 10px rgba(255,0,0,0.3);
  pointer-events: none;
  z-index: 110;
  animation: damageFloat 1s ease-out forwards;
}
@keyframes damageFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 1; transform: translateY(-30px) scale(1.3); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* ── Catch Animation ─────────────────────────────────────────── */
.battle-pokeball {
  position: absolute;
  z-index: 200;
  pointer-events: none;
  animation: pokeballToss 0.8s ease-out forwards;
}
@keyframes pokeballToss {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  50%  { transform: translate(50px, -40px) rotate(180deg); opacity: 1; }
  100% { transform: translate(80px, -80px) rotate(360deg); opacity: 0; }
}
.battle-pokeball.shake {
  animation: pokeballShake 0.3s ease-in-out 3, pokeballFade 0.3s 0.9s forwards;
}
@keyframes pokeballShake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-15deg) scale(1.05); }
  75%      { transform: rotate(15deg) scale(1.05); }
}
@keyframes pokeballFade {
  to { opacity: 0; transform: scale(0.8); }
}

/* ── Weather / Terrain FX ───────────────────────────────────── */
.weather-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.3;
  transition: opacity 0.5s ease;
}
.weather-overlay.rain    { background: linear-gradient(180deg, rgba(80,120,200,0.4) 0%, rgba(80,120,200,0.05) 80%); }
.weather-overlay.sun     { background: radial-gradient(ellipse at 70% 30%, rgba(255,200,50,0.3), transparent 60%); }
.weather-overlay.sandstorm { background: rgba(200,160,80,0.2); animation: sandstormGrain 0.1s steps(3) infinite; }
.weather-overlay.hail    { background: rgba(200,220,240,0.15); }
@keyframes sandstormGrain {
  0%   { opacity: 0.15; }
  50%  { opacity: 0.25; }
  100% { opacity: 0.15; }
}

/* ── Battle layout: one HP card per side ───────
   Each card sits on its own Pokémon's side: the player's Pokémon
   stands bottom-left, so their card takes the top-left (the free
   space above it), and the enemy sits top-right, so its card takes
   the bottom-right (the free space below it). Cards are kept
   compact so they never cover a sprite, and UI sits above art. */
.combat-card {
  width: min(15.5rem, 38%);
  padding: .55rem .75rem;
  border: 2px solid #0d1f2e;
  border-radius: .55rem;
  background: #0b1a29f0;
  box-shadow: 0 .4rem 1rem #00000066;
  z-index: 3;
}
.combat-card.you   { left: 2.5%; top: 3.5%; }
.combat-card.enemy { right: 2.5%; bottom: 3.5%; }
.combat-card .party-name { font-size: .92rem; }
.combat-card .party-name span { font-size: .7rem; }
.combat-card .party-meta { font-size: .62rem; margin: .3rem 0; }
.combat-card .battle-hp-bar { height: 9px; }

/* ── Classic message box (bottom-left) ───────────────────────── */
.battle-log {
  border: 2px solid #e9e0c6;
  border-radius: .7rem;
  background: linear-gradient(180deg, #122433, #0a1623);
  box-shadow: inset 0 0 0 .12rem #00000055, 0 .3rem .8rem #00000055;
  padding: .85rem 1rem;
  font-size: .82rem;
}

/* ── Main action menu (2×2, classic colours) ─────────────────── */
.battle-main-menu { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.battle-main-btn {
  position: relative;
  padding: 1.05rem .8rem;
  border: 2px solid #00000066;
  border-radius: .6rem;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  box-shadow: inset 0 .12rem 0 #ffffff3d, 0 .3rem .6rem #00000055;
  text-shadow: 0 1px 0 #00000088;
  transition: transform .08s ease, filter .12s ease;
}
.battle-main-btn:hover   { filter: brightness(1.12); transform: translateY(-1px); }
.battle-main-btn:active  { transform: scale(.97); }
.battle-main-btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.45); }
.battle-main-btn.fight   { background: linear-gradient(180deg, #e85050, #c03232); }
.battle-main-btn.bag     { background: linear-gradient(180deg, #f2a232, #d67c18); }
.battle-main-btn.pokemon { background: linear-gradient(180deg, #4fc261, #2f9a45); }
.battle-main-btn.run     { background: linear-gradient(180deg, #4d8de3, #2f6cd0); }

/* ── Sub-menus (moves / switch / bag) ────────────────────────── */
.battle-submenu { display: grid; gap: .6rem; }
.battle-back {
  align-self: start; justify-self: start;
  background: #16283a; border: 1px solid #2c4a63; color: #cfe2ee;
  padding: .45rem .85rem; border-radius: .5rem; cursor: pointer; font-size: .82rem;
}
.battle-back:hover { background: #1e354b; }
.battle-switch-list { display: grid; gap: .5rem; }
.battle-switch-btn {
  padding: .65rem .85rem; border: 1px solid #2c4a63; border-radius: .55rem;
  background: #13263a; color: #dcebf3; font-size: .82rem; text-align: left; cursor: pointer;
}
.battle-switch-btn:hover { background: #1a334b; border-color: #3f6a8a; }
.battle-switch-btn:disabled { opacity: .45; cursor: not-allowed; }
.battle-bag-list { display: grid; gap: .6rem; }

/* ── Move buttons — type-coloured accents ────────────────────── */
.battle-move-btn { border-left: 5px solid #8a8f98; }
.battle-move-btn[data-move-type="Normal"]   { border-left-color: #a8a77a; }
.battle-move-btn[data-move-type="Fire"]     { border-left-color: #ee8130; background: linear-gradient(180deg, rgba(238,129,48,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Water"]    { border-left-color: #6390f0; background: linear-gradient(180deg, rgba(99,144,240,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Electric"] { border-left-color: #f7d02c; background: linear-gradient(180deg, rgba(247,208,44,.2), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Grass"]    { border-left-color: #7ac74c; background: linear-gradient(180deg, rgba(122,199,76,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Ice"]      { border-left-color: #96d9d6; background: linear-gradient(180deg, rgba(150,217,214,.2), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Fighting"] { border-left-color: #c22e28; background: linear-gradient(180deg, rgba(194,46,40,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Poison"]   { border-left-color: #a33ea1; background: linear-gradient(180deg, rgba(163,62,161,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Ground"]   { border-left-color: #e2bf65; background: linear-gradient(180deg, rgba(226,191,101,.2), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Flying"]   { border-left-color: #a98ff3; background: linear-gradient(180deg, rgba(169,143,243,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Psychic"]  { border-left-color: #f95587; background: linear-gradient(180deg, rgba(249,85,135,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Bug"]      { border-left-color: #a6b91a; background: linear-gradient(180deg, rgba(166,185,26,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Rock"]     { border-left-color: #b6a136; background: linear-gradient(180deg, rgba(182,161,54,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Ghost"]    { border-left-color: #735797; background: linear-gradient(180deg, rgba(115,87,151,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Dragon"]   { border-left-color: #6f35fc; background: linear-gradient(180deg, rgba(111,53,252,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Dark"]     { border-left-color: #705746; background: linear-gradient(180deg, rgba(112,87,70,.22), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Steel"]    { border-left-color: #b7b7ce; background: linear-gradient(180deg, rgba(183,183,206,.2), rgba(0,0,0,.38)); }
.battle-move-btn[data-move-type="Fairy"]    { border-left-color: #d685ad; background: linear-gradient(180deg, rgba(214,133,173,.22), rgba(0,0,0,.38)); }

/* ── Mobile: keep the arena tall enough that cards never overlap sprites ── */
@media (max-width: 850px) {
  .battle-stage { min-height: 19rem; }
  .combat-card { width: min(13.5rem, 42%); }
}

/* Em telas baixas/estreitas o palco cai de 23rem para 19rem (styles.css + min-height acima), então
   a arena inteira encolhe na mesma proporção (19/23) para o sprite continuar pousado na plataforma. */
@media (max-height: 800px) {
  .battle-stage { --arena: 0.8261; }
}
@media (max-width: 850px) {
  .battle-stage { --arena: 0.8261; }
}