#bag-modal-overlay .item-slot .item-image {
  box-sizing: content-box !important;
}
a {
    text-decoration: none;
}
inf-battle-bar#atacar[data-tabs-wl]:not([style*="display: none"]) {
	display: flex !important;
	/* width: 600px; */
	flex-wrap: wrap;
	max-width: 490px;
	justify-content: center;
	margin-bottom: 10px;

}
/* =================================================== */
/*  ESTILOS PARA ANIMAÇÃO DE ATAQUES (GIFs)            */
/* =================================================== */

.attack-animation-container {
  position: absolute;
  display: none;
  z-index: 100;
  pointer-events: none;
  /* A propriedade 'transform' foi removida */
}

.attack-animation-container img {
  /* width: 250px;  
  height: 250px;  */
  object-fit: contain; /* Garante que o GIF não seja distorcido */
  image-rendering: pixelated;
}
#attack-animation-player { /* no oponente*/
   

      
  bottom: 1%;
    right: 15%;
}


#attack-animation-opponent { /* no seu */
   bottom: 10%;
    left: 20%;
}


/* ------------------- */

.battlearea6 #attack-animation-player { /* no oponente*/
   
  bottom: 1%;
    right: 15%;
}


.battlearea6 #attack-animation-opponent { /* no seu */
    bottom: 10%;
    left: 20%;
}





#atacar{
flex-wrap: wrap;
place-content: center;
}

.acoes {
	width: 100px;
}

.centerbuttom {
	display: flex;

}

.text-box {
	margin-top: 7px;
	margin-bottom: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

.inf-battle-bar {
	width: 100%;
	background: url(../images/layout/battle/action-content.png) no-repeat;
	padding: 10px 0;
	background-size: 100% 100%;
	height: 74px;
	min-width: 680px;

}

.atk-dados {
	display: flex;
	justify-content: center;
	margin-top: 10px;

}

.atk {
	width: 41%
}

.dados-battle {
	width: 53%;
	background: url(../images/layout/battle/text-content.png) no-repeat;
	background-size: 100% 100%;
	display: flex;
	align-items: center;

}

@media (max-width: 768px) {
	.inf-battle-bar {
		min-width: 0;
		height: auto;
		min-height: 150px;
	}

	.atk-dados {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

	}

	.atk {
		width: 100%
	}

	#atacar {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		max-width: 100%;
	}

	.dados-battle {
		width: 100%;
		height: 130px;
		margin-top: 15px;
	}

}




/* #arena {
	min-height: 600px;
} */

.water-1 {
	background-image: url('../images/attack/backgrounds/news(1)/agua.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.ice {
	background-image: url('../images/attack/backgrounds/news(1)/ice.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.water-1 #img_pokemon_en,
.ice #img_pokemon_en {
	position: absolute;
	bottom: 45%;
	right: 20%;
}



.gras-1 {
	background-image: url('../images/attack/backgrounds/news(1)/gras.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.gras-1 #img_pokemon_en,
.gras-2 #img_pokemon_en,
.gras-3 #img_pokemon_en {
	position: absolute;
	bottom: 39%;
	right: 25%;
}

.battlearea8 #img_pokemon_en {
	bottom: 40%;
	position: absolute;
	right: 20%;

}

.gras-2 {
	background-image: url('../images/attack/backgrounds/news(1)/gras.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.gras-2 #img_pokemon_en {
	position: absolute;
	bottom: 35%;
	right: 25%;
}



.gras-3 {
	background-image: url('../images/attack/backgrounds/news(1)/gras.jpg');
	width: 100%;
	background-size: 100% 100%;

	background-repeat: no-repeat
}

.duelo-1 {
	background-image: url('../images/attack/backgrounds/duelo-1.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.duelo-2 {
	background-image: url('../images/attack/backgrounds/duelo-2.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.battlearea {
	background-image: url('../images/attack/backgrounds/news(1)/raid.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea #img_pokemon_en {
	position: absolute;
	bottom: 35%;
	right: 25%;
}

/* Estilo específico para batalhas de RAID */
.battleraid {
	background-image: url('../images/attack/backgrounds/news(1)/raid.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battleraid #img_pokemon_en {
	position: absolute;
	bottom: 35%;
	right: 12%;
    /* min-width: 25%; */
}
.battlearea3 {
	background-image: url('../images/attack/backgrounds/news(1)/praia.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea3 #img_pokemon_en {
	position: absolute;
	bottom: 40%;
	right: 18%;
}



.battlearea4 {
	background-image: url('../images/attack/backgrounds/news(1)/grot.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea4 #img_pokemon_en {
	position: absolute;
	bottom: 37%;
	right: 26%;
}



.battlearea {
	background-image: url('../images/attack/backgrounds/news(1)/lava.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea5 #img_pokemon_en {
	position: absolute;
	bottom: 35%;
	right: 25%;
}


.battlearea5 {
	background-image: url('../images/attack/backgrounds/news(1)/lava.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.battlearea6 {
	background-image: url('../images/attack/backgrounds/news(1)/dojo.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea6 #img_pokemon_en {
	position: absolute;
	bottom: 35%;
	right: 25%;
}


.battlearea7 {
	background-image: url('../images/attack/backgrounds/news(1)/torre.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}

.battlearea7 #img_pokemon_en {
	position: absolute;
	bottom: 38%;
	right: 20%;
}





.battlearea8 {
	background-image: url('../images/attack/backgrounds/news(1)/gras.jpg');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.duel_area {
	background-image: url('../images/attack/backgrounds/duel-area-1.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.duel_area2 {
	background-image: url('../images/attack/backgrounds/duel-area-2.png');
	width: 100%;
	background-size: 100% 100%;
	background-repeat: no-repeat
}



.new_bar {
	background-image: url('../images/attack/new_bar.png');
	background-repeat: no-repeat;
	width: 240px;
	height: 90px
}

/* img dos pokes */

#img_pokemon,
#img_pokemon_en,
#img_trainer,
#img_you,
#img_opponent {
	filter: drop-shadow(6px 6px 4px rgba(26, 25, 25, 0.4))
}

#img_pokemon {
	position: absolute;
    left: 25%;
    bottom: 19%;

}

@media (max-width: 768px) {


	#img_pokemon,
	#img_pokemon_en {}

	.battlearea6 #img_pokemon_en {
		bottom: 48%;
		right: 15%;

	}

	#img_pokemon {
		left: 10%;
		bottom: 20%;

	}

}

#pokemon[data-tabs-wl]:not([style*="display: none"]) {
	display: flex !important;
}

.battle-pokemon {
	    display: flex
;
    /* gap: 8px; */
    width: 100%;
    height: auto;
    /* padding: 10px 0px; */
    margin: 3px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: rgba(14, 13, 13, 0.4) 0px 0px 15px;
    background-image: linear-gradient(45deg, #236685d1, #2196F3);
    border-bottom: 2px solid #27374e;
    border-right: 1px solid #27374e;
    background-color: #29577c59;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    color: #9eadcd;
    flex-wrap: wrap;
    justify-content: center;
	max-width: 130px;
}

/* Estilo para a imagem do Pokémon dentro do botão */
.battle-pokemon .pokemon-icon {
	width: 32px;
	/* Tamanho do ícone */
	height: 32px;
	/* Tamanho do ícone */
	object-fit: contain;
	/* Garante que a imagem não seja distorcida */
	flex-shrink: 0;
	/* Impede que a imagem encolha */
}

/* Container para o nome e a barra de HP */
.battle-pokemon .pokemon-details {
	    display: flex
;
    /* width: 100%; */
    text-align: center;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: center;
}

.battle-pokemon .pokemon-name {
	white-space: nowrap;
	/* Impede a quebra de linha do nome */
	overflow: hidden;
	text-overflow: ellipsis;
	/* Adiciona "..." se o nome for muito longo */
}

/* Ajuste na barra de HP para funcionar com o novo layout */
.battle-pokemon .hp_red_change {
	height: 4px;
	
	
	background-color: #555;
	
	border-radius: 2px;
	margin-top: 4px;
}

.battle-pokemon .hp_red_change .progress {
	height: 100%;
	background-color: #4CAF50;
	/* Cor do progresso */
	border-radius: 2px;
}

.hp_red_change{

    background: #cccccc;
    border: #f2f2f2 1px solid;
    border-radius: 4px;
    clear: both;
    height: 8px;
    overflow: hidden;
    width: 130px;
}
@media (max-width: 768px) {
    
    /* Faz cada item ocupar cerca de 1/3 da tela, menos as margens.
       Isso força o layout a ter no máximo 3 itens por linha. */
    .battle-pokemon {
        flex-basis: 30%; /* Base de largura flexível */
        min-width: 120px; /* Largura mínima para não ficar muito pequeno */
        padding: 6px;
    }

    /* Reduz o tamanho do ícone em telas pequenas */
    .battle-pokemon .pokemon-icon {
        width: 28px;
        height: 28px;
    }

    /* Aqui está a regra que você pediu para a barra de HP */
    .battle-pokemon .pokemon-details {
        width: 80px; /* Largura fixa para os detalhes no mobile */
    }
}

/* --- ESTILOS PARA A NOVA MOCHILA E MODAIS --- */

/* Container Principal da Mochila */
.bag-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Abas (Itens / Pokébolas) */
.bag-tabs {
    display: flex;
    margin-bottom: 5px; /* Reduzido para economizar espaço */
}

.bag-tab-button {
    flex: 1;
    padding: 6px; /* Reduzido */
    cursor: pointer;
    background-color: #2e3d53;
    border: 1px solid #577599;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    margin: 0 2px;
    transition: background-color 0.2s;
}

.bag-tab-button:hover {
    background-color: #3a4c66;
}

.bag-tab-button.active {
    background-color: #4a6a94;
    border-bottom-color: #4a6a94;
}

/* Lista de itens (grid) */
.new-item-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)); /* Itens um pouco menores */
    gap: 8px;
    overflow-y: unset;
    padding: 5px;
    max-height: 70px; /* Altura ajustada para a barra de batalha */
}

/* Slot de um item individual */
.item-slot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 5px;
    cursor: pointer;
    border: 1px solid #577599;
    transition: background-color 0.2s;
}

.item-slot:hover {
    background-color: rgba(255,255,255,0.1);
}

.item-slot:hover .fragmented-warning {
    opacity: 1 !important;
}

.item-slot.fragmented .crack-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,0,0,0.2) 50%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.item-image {
    width: 38px; /* Tamanho ajustado */
    height: 38px;
}

/* Badge de quantidade do item */
.item-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background-color: rgba(0,0,0,0.7);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    text-align: center;
    border: 1px solid white;
    font-weight: bold;
    padding: 5px;
    width: 25px;
}

/* --- ESTILOS COMUNS PARA OS MODAIS (Poção e Troca) --- */
#potion-modal-overlay,
#change-pokemon-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Z-index alto para ficar sobre tudo */
}

#potion-modal-content,
#change-pokemon-modal-content {
    background: #2e3d53;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #577599;
    width: 90%;
    max-width: 550px; /* Um pouco mais largo para 3 colunas */
    text-align: center;
    position: relative;
    color: white;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

#close-potion-modal,
#close-change-pokemon-modal {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

#potion-pokemon-list,
#change-pokemon-list {
    display: grid;
    /* Tenta criar 3 colunas, mas se ajusta para 2 em telas menores */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-top: 15px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
}

.potion-pokemon-slot,
.change-pokemon-slot {
    background: #4a6a94;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 1px solid #3a4c66;
}

.potion-pokemon-slot:not(.disabled):hover,
.change-pokemon-slot:not(.disabled):hover {
    background-color: #5f87b8;
    transform: translateY(-3px);
}

/* Estilo para slots desabilitados (HP cheio, desmaiado, ovo, etc.) */
.potion-pokemon-slot.disabled,
.change-pokemon-slot.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #444;
}

.potion-pokemon-slot .pokemon-icon,
.change-pokemon-slot .pokemon-icon {
    width: 48px;
    height: 48px;
    image-rendering: pixelated; /* Mantém os sprites nítidos */
}

/* Barra de HP pequena dentro dos modais */
.hp-bar-container-small {
    height: 8px;
    width: 80%;
    background-color: #555;
    border-radius: 4px;
    border: 1px solid #222;
    overflow: hidden; /* Garante que a barra interna não ultrapasse a borda */
}

.hp-bar-container-small .hp-bar {
    height: 100%;
    background: linear-gradient(to bottom, #5cfa5c, #0f9b0f); /* Gradiente verde */
    border-radius: 3px;
    transition: width 0.5s ease-in-out; /* Animação suave da barra de vida */
}/* --- ESTILOS PARA O NOVO MODAL DA MOCHILA --- */

#bag-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#bag-modal-content {
    background: #2e3d53;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #577599;
    width: 90%;
    max-width: 400px; /* Largura do modal da mochila */
    text-align: center;
    position: relative;
    color: white;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

#close-bag-modal {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

/* Ajusta a altura da lista de itens dentro do modal */
#bag-modal-content .new-item-list {
    max-height: 250px; /* Permite mais itens visíveis */
    min-height: 80px; /* Altura mínima */
}

/* Mensagem para quando não houver itens */
.empty-category {
    color: #aaa;
    padding: 20px;
    font-style: italic;
}
.img_pokemon_en.boss{
height: 120px;
}

/* =================================================== */
/*  ESTILOS DE POSICIONAMENTO PARA DUELO               */
/* =================================================== */

/* Container principal da arena de duelo */
#duel-arena {
    position: relative; /* Essencial para o posicionamento absoluto dos filhos */
    width: 100%;
    height: 450px; /* Altura fixa para a área de batalha, ajuste se necessário */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Impede que sprites grandes "vazem" para fora */
}

/* Sprite do seu Pokémon */
#duel-arena #img_you {
    position: absolute;
    bottom: 5%; /* Distância da parte inferior */
    left: 20%;  /* Distância da esquerda */
    transform: translateX(-50%); /* Centraliza o sprite horizontalmente */
  
}

/* Sprite do Pokémon oponente */
#duel-arena #img_opponent {
    position: absolute;
    bottom: 38%; /* Distância da parte inferior */
    right: 20%;  /* Distância da direita */
    transform: translateX(50%); /* Centraliza o sprite horizontalmente */
   
}

/* Sua barra de status */
#duel-arena .new_bar {
    position: absolute;
    bottom: 15%;
    right: 5%;
    /* float: right; não é mais necessário */
}

/* Barra de status do oponente */
#duel-arena .new_bar2 {
    position: absolute;
    top: 10%;
    left: 5%;
}

/* Ajustes para os hits e danos para alinharem com os sprites */
#duel-arena .infront {
    position: absolute;
    top: 25%;
    right: 25%;
    z-index: 10;
}

#duel-arena .inback {
    position: absolute;
    bottom: 25%;
    left: 25%;
    z-index: 10;
}

#duel-arena #dame { /* Dano no oponente */
    position: absolute;
    top: 20%;
    right: 30%;
    z-index: 11;
}

#duel-arena #dame2 { /* Dano em você */
    position: absolute;
    bottom: 35%;
    left: 30%;
    z-index: 11;
}

/* Adicionando os backgrounds de duelo que você já tem, mas dentro do contexto da arena */
.duelo-1, .duelo-2 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.duelo-1 {
	background-image: url('../images/duelbg.png');
}
.duelo-2 {
	background-image: url('../images/duelbg.png');
}

//* =================================================== */
/*  ESTILOS PARA ANIMAÇÃO DE ATAQUES (GIFs) EM DUELO   */
/* =================================================== */

.attack-animation-container {
  position: absolute;
  display: none; /* Começa escondido */
  z-index: 100;
  pointer-events: none;
  width: 300px;
  height: 300px;
  
  /* TÉCNICA DE CENTRALIZAÇÃO */
  transform: translate(-50%, -50%); 
}

.attack-animation-container img {
  width: 100%; 
  height: 100%; 
  object-fit: contain;
  image-rendering: pixelated;
}



/* Posição da animação NO POKÉMON DO OPONENTE (seu ataque) */
#duel-arena #attack-animation-opponent {
bottom: -2%;
    left: 22%;
}