/* MEDIA QUERIES */
@media (min-width: 900px) {
  body {
    background-attachment: fixed;
  }
}
@font-face {
  font-family: 'Norsebold';
  src: url('https://dekai.neocities.org/Norsebold.woff') format('woff');
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}    
body {
  margin: 0;
  padding: 0;
  background-color: #000000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* <-- Esto ahora centrará el contenedor <main> */
  user-select: none;
  min-height: var(--vh, 100vh);
  position: relative;
  overflow: hidden;
  scrollbar-width: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body::before {
  content: "";
  background: url('https://i.postimg.cc/rmbRg29w/fondo-frr2.png') no-repeat top;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: 0 auto; /* Centra el fondo */
  z-index: -1; /* Lo envía al fondo */
  max-width: 900px;
}
h1 {
  font-family: 'Norsebold', sans-serif;
  text-align: center;
  font-size: 30px;
  text-shadow: 2px 2px 10px #000000;
  margin: 50px;
  letter-spacing: 5px;
}
h2 {
  font-family: 'Norsebold', sans-serif;
  text-align: center;
  font-size: 28px;
  text-shadow: 2px 2px 10px #000000;
}
h3 {
  font-family: 'Norsebold', sans-serif;
  text-align: center;
  text-shadow: 2px 2px 10px #000000;
}
.dos-columnas {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual ancho */
  gap: 7px; /* Espacio entre las cartas */
  padding: 5px;
  scrollbar-width: none;
  width: 96%;
  max-width: 600px;
  height: auto;
  margin: 0 auto; /* Centrado horizontal */
  backdrop-filter: blur(10px) ;
  border-radius: 10px;
  box-shadow: inset 0 0 8px rgba(240, 240, 240, 0.429);
}
/* Columna izquierda */
.criatura-descripcion {
  text-align: center;
  width: auto;
  max-height: 450px; /* Usamos max-height para un control más flexible */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.imagen img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  padding: 10px;
  border-radius: 10px;
  filter: drop-shadow(1px 1px 8px #dec17f77);
  box-shadow: inset 0 0 8px rgba(240, 240, 240, 0.429);
}
/* columna derecha criaturas grid */
.criatura-tarjetas {
  width: auto;
  max-height: 450px; /* Usamos max-height y eliminamos la duplicidad */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
mask-image: linear-gradient(to bottom, transparent 0%, rgba(39, 72, 73, 0.781) 5%, rgba(39, 72, 73, 0.781) 96%, transparent 100%); 
/*mask-image: linear-gradient(rgba(39, 72, 73, 0.781) 94%, transparent);*/
}
.tipo-hostiles { background: #d94141; box-shadow: 0 0 3px rgba(255, 252, 252, 0.46);}       /* Rojo para enemigos */
/*.tipo-hostiles { background-color: #D94141; }       /* Rojo para enemigos */

.tipo-domesticables { background-color: #5CBF6C; }  /* Verde para domesticables */
.tipo-pasivos { background-color: #D6DB55; }        /* amarillo para pasivos */
.tipo-neutrales { background-color: #A0A0A0; }      /* gris para neutrales */
.tipo-minijefes { background-color: #8B70D9; }      /* morado para minijefes */
.tipo-jefes { background-color: #E37E2D; }          /* Naranjo para jefes */

.grid-criaturas {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas de igual ancho */
  gap: 5px;
  margin-top: 0px;
  justify-items: center;
  margin-left: auto;
  margin-right: auto;
}

.criatura-card {
  border-radius: 10px;
  padding: 2px 2px;
  transition: transform 0.1s;
  width: 70px;
}
.criatura-card img {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 70px;
  padding: 3px;
  object-fit: contain;
  border-radius: 8px;
  background-color: #0a09099a;
  backdrop-filter: blur(10px) ;
}
.criatura-nombre {
  color: black;
  font-weight: bold;
  margin: 1px 1px;
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;           /* No saltos de línea */
  overflow: hidden;              /* Oculta el texto que se sale */
  box-sizing: border-box;
  position: relative;
}
.criatura-nombre.marquee span {
  display: inline-block;
  padding-left: 90%;
  animation: marquee 3s linear infinite;
}
.criatura-card img:hover {
  transform: scale(0.85); /* Efecto de agrandamiento al pasar el mouse */
}
/* Estilos para la nueva tabla de drops */
.criatura-descripcion-grid {
  display: flex; /* Cambia a flexbox */
  flex-direction: column; /* Apila los elementos verticalmente */
  gap: 10px;
  padding: 10px;
  margin-top: 10px;
  text-align: center;
}
.drops table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  margin-top: 5px;
  border-radius: 10px;
}
.drops th, .drops td {
  padding: 5px;
  border: 1px solid #444;
  font-size: 12px;
}
.drops th {
  background-color: #222;
 
}
.drops td {
  background-color: #111;

}