body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: #2C2F33;
  font-family: 'Roboto Mono', monospace;
}

#gameContainer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: url('tile_gris.svg');
  background-size: 50px 50px;
  background-repeat: repeat;
  overflow: hidden;
  transform-origin: top left;
}

#player {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: visible;
  transform-origin: center center;
}

#player img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.1s ease-out;
  transform-origin: center center;
  transform: translateZ(0); /* Forzar aceleración por hardware */
}

.enemy {
  position: absolute;
  width: 50px;
  height: 50px;
  background-size: cover;
  position: relative; /* Indispensable para posicionar el pseudo-elemento */
  /* Eliminamos la transición de filter de aquí */
}

/* ⭐ Estilo del círculo envolvente de congelación */
.enemy.frozen::before {
  content: '';
  position: absolute;
  top: -5px; /* Ajusta la posición para centrar el círculo alrededor del sprite */
  left: -5px; /* Ajusta la posición para centrar el círculo alrededor del sprite */
  width: 60px; /* Tamaño del círculo (sprite 50px + 2*5px de desplazamiento) */
  height: 60px; /* Tamaño del círculo */
  border-radius: 50%; /* Para que sea un círculo */
  
  /* Gradiente radial para el relleno azul intenso */
  background: radial-gradient(circle, rgba(30, 144, 255, 0.6) 0%, rgba(70, 130, 180, 0.6) 70%); /* Azul fuerte a más suave con opacidad */
  
  /* Borde azul claro con box-shadow */
  box-shadow: 0 0 10px 3px rgba(173, 216, 230, 0.8), /* Borde exterior azul claro */
              inset 0 0 5px rgba(173, 216, 230, 0.5); /* Borde interior suave */
  
  z-index: 1; 
  
  /* Transición para la aparición y desaparición suave */
  opacity: 0;
  transform: scale(0.2); /* Empieza pequeño */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ⭐ Cuando el enemigo está congelado, el círculo se hace visible */
.enemy.frozen::before {
  opacity: 1;
  transform: scale(1); /* Crece a su tamaño normal */
}


.fireball {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, orange 60%, red);
  border-radius: 50%;
}

/* ⭐ Nuevo estilo para el Frostball */
.frostball {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #87CEFA 60%, #1E90FF); /* Azul claro a oscuro */
  border-radius: 50%;
}

.explosion {
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, yellow, red, transparent); /* Explosión de Fireball por defecto */
  border-radius: 50%;
  animation: boom 0.5s ease-out forwards;
  transform: translate(-50%, -50%);
  z-index: 500;
}

/* ⭐ Nueva clase para la explosión de Frostball */
.explosion.frost {
  background: radial-gradient(circle, #ADD8E6, #1E90FF, transparent); /* Azul claro a oscuro */
}


@keyframes boom {
  from { transform: scale(0.2) translate(-50%, -50%); opacity: 1; }
  to { transform: scale(1.5) translate(-50%, -50%); opacity: 0; }
}

.damage-text {
  position: absolute;
  color: red;
  font-weight: bold;
  font-size: 18px;
  animation: floatUp 0.8s ease-out forwards;
  pointer-events: none;
  left: 50%;
  top: 50%;
  z-index: 800;
}

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

.hit {
  filter: brightness(0.5) saturate(2) hue-rotate(-20deg);
}

#joystickContainer {
  position: fixed;
  bottom: 80px;
  right: 80px;
  width: 140px;
  height: 140px;
  background: rgba(0,0,0,0.3);
  border: 2px solid gold;
  border-radius: 50%;
  z-index: 5000;
  touch-action: none;
}

#joystick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  background: gold;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
}

.ui-container {
  position: fixed;
  top: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.left-side {
  left: 15px;
  align-items: flex-start;
}

.right-side {
  right: 15px;
  align-items: flex-end;
}

.hud-box {
  padding: 8px 15px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid gold;
  border-radius: 10px;
  color: gold;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  min-width: 100px;
  text-align: center;
  font-family: 'Roboto Mono', monospace;
}

.level-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}

.level-text {
  color: gold;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}

/* ⭐ Aplicar el mismo estilo a los botones de nivel y al selector de hechizo */
.level-button, #spellSelector, #pauseButton  { /* Añadido #spellSelector aquí */
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid gold;
  border-radius: 10px;
  color: gold;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  font-family: 'Roboto Mono', monospace;
}

.level-button:hover, #characterSelector:hover, #spellSelector:hover { /* Añadido #spellSelector aquí */
  transform: scale(1.05);
}

#characterSelector {
  padding: 8px 15px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid gold;
  border-radius: 10px;
  color: gold;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
  font-family: 'Roboto Mono', monospace;
}


/* ⭐ Nuevo estilo para el Lightball */
.lightball {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #FFFFE0 60%, #FFD700); /* Amarillo claro a dorado */
  border-radius: 50%;
}

/* ⭐ Nueva clase para la explosión de Lightball */
.explosion.light {
  background: radial-gradient(circle, #FFFFE0, #FFD700, transparent); /* Amarillo claro a dorado */
}

/* ⭐ Estilo del círculo de conversión */
.enemy.converted::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  
  /* Gradiente radial para el relleno amarillo */
  background: radial-gradient(circle, rgba(255, 255, 128, 0.6) 0%, rgba(255, 215, 0, 0.6) 70%); /* Amarillo suave a dorado con opacidad */
  
  /* Borde dorado con box-shadow */
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.8), 
              inset 0 0 5px rgba(255, 215, 0, 0.5); 
  
  z-index: 1;
  opacity: 0;
  transform: scale(0.2); 
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ⭐ Cuando el enemigo está convertido, el círculo se hace visible */
.enemy.converted::before {
  opacity: 1;
  transform: scale(1);
}

/* ⭐ Cambia el color del texto de daño para los enemigos convertidos */
.damage-text.converted {
    color: #FFD700; /* Dorado para el daño entre enemigos */
}

/* Añade esto al final de tu archivo style.css */

/* ⭐ Nuevo estilo para el Shadowball */
.shadowball {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #8A2BE2 60%, #4B0082); /* Azul violeta a índigo oscuro */
  border-radius: 50%;
}

/* ⭐ Nueva clase para la explosión de Shadowball */
.explosion.shadow {
  background: radial-gradient(circle, #8A2BE2, #4B0082, transparent); /* Azul violeta a índigo oscuro */
}

/* ⭐ Estilo del efecto de aflicción */
.enemy.afflicted::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  
  /* Gradiente radial para el relleno morado oscuro */
  background: radial-gradient(circle, rgba(138, 43, 226, 0.5) 0%, rgba(75, 0, 130, 0.6) 70%); /* Morado suave a oscuro con opacidad */
  
  /* Borde morado oscuro con box-shadow */
  box-shadow: 0 0 10px 3px rgba(75, 0, 130, 0.8), 
              inset 0 0 5px rgba(75, 0, 130, 0.5); 
  
  z-index: 1;
  opacity: 0;
  transform: scale(0.2); 
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ⭐ Cuando el enemigo está afligido, el círculo se hace visible */
.enemy.afflicted::before {
  opacity: 1;
  transform: scale(1);
}

/* ⭐ Cambia el color del texto de daño por tiempo (puedes usar el mismo morado si quieres) */
.damage-text.dot {
    color: #8A2BE2; /* Un morado vibrante para el daño por tiempo */
    font-size: 1.1em; /* Un poco más grande para distinguirlo */
}

/* ⭐ Nuevo estilo para el Natureball */
.natureball {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #98FB98 60%, #228B22); /* Verde claro a verde oscuro */
  border-radius: 50%;
}

/* ⭐ Nueva clase para la explosión de Natureball */
.explosion.nature {
  background: radial-gradient(circle, #98FB98, #228B22, transparent); /* Verde claro a verde oscuro */
}

/* ⭐ Estilo del efecto de enredado */
.enemy.entangled::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 60px;
  height: 60px;
  
  /* ⭐ CÓDIGO NUEVO: Usa la imagen SVG en lugar del gradiente */
  background-image: url('isEntangled.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 1;
  opacity: 0;
  transform: scale(0.2); 
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ⭐ Cuando el enemigo está enredado, la imagen se hace visible */
.enemy.entangled::before {
  opacity: 1;
  transform: scale(1);
}

/* Nuevo estilo para el daño por tiempo de Natureball */
.damage-text.dot-nature {
    color: #3CB371; /* Un verde vibrante para el daño por tiempo de naturaleza */
    font-size: 1.1em; /* Un poco más grande para distinguirlo */
}

/* ⭐ Nuevo estilo para el Gunshot */
.gunshot {
  position: absolute;
  width: 15px;
  height: 15px;
  background: radial-gradient(circle, #000000 60%, #333333); /* ⭐ ¡CORREGIDO! Color negro a gris oscuro */
  border-radius: 50%;
}

/* ⭐ Nueva clase para la explosión de Gunshot */
.explosion.gun {
  background: radial-gradient(circle, #333333, #000000, transparent); /* ⭐ ¡CORREGIDO! Gris oscuro a negro a transparente */
}

body, html {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* ⭐ ESTILO PARA EL CONTENEDOR DE BOTÍN ⭐ */
.dropped-loot {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    /* Mantenemos la animación de pulsación */
    animation: lootPulse 1.5s infinite;
}

/* ⭐ ESTILO PARA LA IMAGEN DE BOTÍN (CON BRILLO FIJO) ⭐ */
.dropped-loot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ⭐ El brillo ahora es un estilo estático, no una animación ⭐ */
    filter: drop-shadow(0 0 10px rgba(255, 140, 0, 0.8));
}

/* ⭐ Mantenemos solo la animación de pulsación ⭐ */
@keyframes lootPulse {
    0% { transform: scale(1) translate(-50%, -50%); }
    50% { transform: scale(1.2) translate(-50%, -50%); }
    100% { transform: scale(1) translate(-50%, -50%); }
}

/* ⭐ Nuevo estilo para el HUD más pequeño (loot) */
.hud-box.small-hud {
    font-size: 14px;
    min-width: 20px;
    padding: 5px 10px;
}

/* ⭐ NUEVO: Estilos para el contador de tesoros con iconos */
.loot-counter {
    display: flex;
    align-items: center;
    margin: 0 2px;
    font-weight: bold;
}

.loot-counter img {
    width: 1em; /* O 16px, 18px, lo que mejor se ajuste a tu diseño */
    height: 1em;
    margin-right: 1px;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5)); 
}




/* ⭐ NUEVO: Estilo para Windshot */
.windshot {
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #FFFFFF 60%, #E0FFFF);
  border-radius: 50%;
}


/* ⭐ NUEVO: Estilo para la explosión de Windshot */
.explosion.wind {
  background: radial-gradient(circle, white, transparent);
}

/* ⭐ Estilo del efecto "levantado" (Lifted / Windshot) */
.enemy.lifted::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;

  /* Gradiente radial blanquecino */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(220, 220, 220, 0.6) 70%);
  
  /* Halo blanco con box-shadow */
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.8),
              inset 0 0 5px rgba(255, 255, 255, 0.5);

  z-index: 1;
  opacity: 0;
}

/* ⭐ Cuando el enemigo está levantado, el círculo se hace visible */
.enemy.lifted::before {
  opacity: 1;
  transform: scale(1);
}

/* Reglas de CSS para optimizar el rendimiento en dispositivos móviles */
@media (max-width: 768px) {
    /* Desactivar la sombra en los elementos de la interfaz (HUD) */
    .hud-box {
        box-shadow: none;
    }

    /* Desactivar las sombras en todos los estados de los enemigos */
    .enemy.frozen::before,
    .enemy.converted::before,
    .enemy.afflicted::before,
    .enemy.lifted::before { /* ⭐ AÑADIDO: Ahora incluye la burbuja del windshot */
        box-shadow: none;
        filter: none;
        background-color: transparent; /* ⭐ Desactiva también el gradiente */
        border: none; /* ⭐ Desactiva el borde para eliminar el halo */
    }

    /* Desactivar la animación 'pulsating' del contenedor del botín */
    .dropped-loot {
        animation: none;
    }

    /* Desactivar la sombra en la imagen del botín */
    .dropped-loot img {
        filter: none;
    }
}

/* ⭐ ESTILO MODIFICADO: Ahora el efecto es una explosión rápida y un desvanecimiento lento */
.blood-explosion {
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: url('blood_splash.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(0);
    opacity: 0;
    /* ⭐ El cambio principal está aquí: duración total de 1.5s */
    animation: blood-burst 1.5s ease-out forwards;
    z-index: 200;
    pointer-events: none;
}

@keyframes blood-burst {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }
    10% {
        /* ⭐ ¡El estallido ocurre en solo el 10% del tiempo total! */
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        /* ⭐ El desvanecimiento ocurre durante el 90% restante del tiempo */
        transform: scale(1.5); /* Se mantiene el tamaño del estallido */
        opacity: 0;
    }
}

/* ⭐ NUEVO: Estilos para el efecto en el jugador (gradiente) */
.blood-strike-player {
    position: absolute;
    width: 150px; /* Tamaño del efecto del jugador */
    height: 150px; /* Tamaño del efecto del jugador */
    border-radius: 50%; /* Circular para un aura */
    background: radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, rgba(139, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 100%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    z-index: 100;
    pointer-events: none;
}

.blood-strike-player.active {
    opacity: 1;
    transform: scale(1.1); /* Se expande ligeramente */
}

/* ⭐ NUEVO: Estilo para el texto de curación */
.heal-text {
  position: absolute;
  color: #32CD32; /* Verde Lima */
  font-weight: bold;
  font-size: 18px;
  animation: floatUp 0.8s ease-out forwards; /* Reutiliza la animación floatUp */
  pointer-events: none; /* Ignora eventos de ratón */
  left: 50%;
  top: 50%;
  z-index: 800; /* Asegura que esté por encima de otros elementos */
}

/* ⭐ NUEVO: Contenedor para el selector de personaje y género */
.character-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ⭐ NUEVO: Contenedor para el selector de personaje y género */
.character-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

Añade el estilo para el selector de género.
CSS

/* ⭐ NUEVO: Estilos para los botones de género */
.gender-selector {
    display: flex;
    align-items: center;
    border: 2px solid gold;
    border-radius: 10px;
    overflow: hidden;
}

.gender-button {
    background: rgba(0, 0, 0, 0.7);
    border: none;
    padding: 8px 12px;
    color: gold;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.gender-button:hover {
    background: rgba(30, 30, 30, 0.9);
}

.gender-button.active {
    background: gold;
    color: black;
}