* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #222; display: flex;
    justify-content: center; align-items: center;
    height: 100vh; overflow: hidden;
    font-family: sans-serif; /* Añadido para consistencia */
}

#mapa {
  position: absolute;
  width: 128000px; /* ANCHO (1000) * TAM (128) */
  height: 128000px; /* ALTO (1000) * TAM (128) */
  transform: translate(0px, 0px);
  will-change: transform;
}

.tile {
  width: 128px;
  height: 128px;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat; /* Añadido */
  background-position: center; /* Añadido */
  transform: translate(0px, 0px);
  will-change: transform;
}

.npc {
  width: 150px;
  height: 150px;
  position: absolute; /* Necesario para posicionar con top/left */
  background-size: contain; /* Mejor para personajes */
  background-repeat: no-repeat;
  background-position: center;
  /* transform: translate(-50%, -50%); <-- Se maneja con top/left en JS */
  border-radius: 50%;
  z-index: 5;
  will-change: transform; /* Para movimientos */
}

.entidad {
  position: absolute; /* Necesario para posicionar con top/left */
  background-size: contain; /* Mejor para objetos */
  background-repeat: no-repeat;
  background-position: center;
  /* border-radius: 50%; <-- Quitado, mejor definir por tipo si se necesita */
  width: 128px; /* Tamaño base, puede ser sobreescrito */
  height: 128px; /* Tamaño base, puede ser sobreescrito */
  z-index: 4;
  will-change: transform; /* Para posibles animaciones/cambios */
  /* transform se maneja en JS o en clases específicas */
}

#escena {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(0, 0, 0);
  background: black;
  cursor: pointer;
}

#jugador {
    width: 150px;
    height: 150px;
    position: absolute;
    /* left: 0; */ /* Se calcula en JS */
    /* top: 0; */ /* Se calcula en JS */
    background-size: cover;
     background-image: url('panda.jpeg');
     border-radius: 50%;
    z-index: 10;
    pointer-events: none; /* Para que no interfiera con clics en el mapa */
    will-change: transform; /* Buena optimización */
    /* El posicionamiento se hace con transform: translate() en JS */
  }

#dialogo {
  font-size: large;
  display: none;
  position: fixed;
  bottom: 35%; /* Ajustado un poco más arriba */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85); /* Un poco más opaco */
  color: #333; /* Texto oscuro para fondo claro */
  padding: 20px; /* Más padding */
  border: 1px solid #aaa; /* Borde sutil */
  border-radius: 8px; /* Bordes redondeados */
  z-index: 1000; /* Muy alto para estar sobre todo */
  min-width: 300px;
  max-width: 60%; /* Límite de ancho */
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
}
#dialogo p {
    margin-bottom: 15px; /* Más espacio bajo el texto */
    color: #333; /* Asegurar color de texto */
    font-family: sans-serif;
}
#dialogo button {
    padding: 8px 18px; /* Botón más grande */
    cursor: pointer; /* Mantenemos el cursor */
    background-color: #111; /* Fondo negro/muy oscuro */
    color: #fff; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 2px; /* Esquinas mínimamente redondeadas */
    margin-top: 10px; /* Espacio sobre el botón */
    box-shadow: none; /* Sin sombra */
}
#dialogo button:hover {
    background-color: #333; /* Oscurece ligeramente al pasar el ratón */
}


/* --- Estilos Específicos por Tipo de Entidad --- */
/* Estos ajustan tamaño y offset para centrar mejor la base visual */

.entidad-palo {
    width: 64px; /* Más pequeño */
    height: 64px;
    /* Centrado en su tile */
}

.entidad-piedra_recogible {
    width: 64px; /* Más pequeño */
    height: 64px;
    /* Centrado en su tile */
}

.entidad-seta {
    width: 64px; /* Más pequeño */
    height: 64px;
    /* Centrado en su tile */
}

.entidad-arbol {
    width: 192px; /* Más grande */
    height: 192px;
    /* El JS lo posicionará, el offset visual se maneja ahí si es necesario */
    /* O podrías añadir un transform aquí si la base de la imagen no está centrada */
    /* transform: translate(-32px, -64px); Ejemplo */
    z-index: 6; /* Los árboles pueden estar por encima de NPCs bajos */
}

.entidad-arbusto {
    width: 100px;
    height: 100px;
    /* Centrado en su tile */
    z-index: 3; /* Debajo de entidades pequeñas */
}

.entidad-tocon {
    width: 80px;
    height: 80px;
    /* Centrado en su tile */
    z-index: 3;
}

.entidad-roca { /* Roca grande no recogible */
    width: 128px;
    height: 128px;
    /* Ocupa todo el tile */
    z-index: 6; /* Como los árboles */
}


/* --- ESTILOS INVENTARIO (CON CRAFTEO INTEGRADO) --- */

/* Botón de Inventario */
#boton-inventario {
  position: fixed; /* Fijo en la pantalla */
  top: 20px;
  right: 2%;
  padding: 10px 15px;
  cursor: pointer;
  z-index: 1002; /* Por encima del panel de inventario y diálogo */
  background-color: #111; /* Fondo negro/muy oscuro */
  color: #fff; /* Texto blanco */
  border: none; /* Sin borde */
  border-radius: 2px; /* Esquinas mínimamente redondeadas */
  font-family: sans-serif;
}

/* Panel de Inventario (Ahora incluye Crafteo) */
#inventario-panel {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 60px; /* Debajo del botón */
  right: 2%; /* Pegado al borde derecho */
  width: 40vw; /* 25% del ancho de la ventana */
  height: calc(100vh - 22%); /* Ocupa casi toda la altura, dejando espacio para el botón */

  background-color: rgba(50, 50, 50, 0.9); /* Fondo semitransparente */
  /* border: 2px solid #aaa; <-- Eliminado */
  border-radius: 4px 0 0 4px; /* Esquinas menos redondeadas */
 /* Quita el borde derecho ya que está pegado */
  color: white;
  padding: 10px;
  z-index: 1001; /* Por encima del juego, debajo del botón */
  /* Propiedades Flexbox para el contenido INTERNO del panel */
  /* display: flex; <-- Se añade con la clase .visible */
  flex-direction: column; /* Apila título, items, separador, crafteo */
  align-items: center; /* Centra títulos y separador */
}

/* Estilos para botones de modo */
#inventario-modos {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: 15px;
  gap: 10px;
}

#inventario-modos button {
  padding: 5px 10px;
  background-color: #111; /* Fondo negro/muy oscuro */
  color: #fff; /* Texto blanco */
  cursor: pointer;
  border-radius: 2px; /* Menos redondeado */
  border: none; /* Sin borde */
  box-shadow: none; /* Sin sombra */
}
#inventario-modos button.modo-activo {
  /* Estilo activo ahora es igual al normal para máxima unificación */
  background-color: #111; /* Fondo negro/muy oscuro */
  color: #fff; /* Texto blanco */
  /* border-color: #aaa; <-- Eliminado */
}
/* Clase que se añade/quita con JS para mostrar/ocultar */
#inventario-panel.visible {
  display: flex; /* ¡Aquí está el display: flex! */
}

/* Estilo para el título principal dentro del panel */
#inventario-panel h2:first-of-type { /* Solo el primer h2 (Inventario) */
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
  color: #eee;
  /* border-bottom: 1px solid #aaa; <-- Eliminado */
  padding-bottom: 5px;
  width: 100%; /* Ocupa todo el ancho del panel */
  font-family: sans-serif;
}

/* Contenedor principal para los items del inventario */
#inventario-items {
  width: 100%;
  /* height: 200px;  Altura ahora dinámica */
  flex-grow: 1; /* Ocupa el espacio disponible */
  overflow-y: auto; /* Añade scroll si hay muchos items */
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* Espacio entre items */
  justify-content: flex-start; /* Alinea items al inicio */
  align-content: flex-start; /* Alinea las líneas al inicio */
  /* margin-bottom: 10px; Espacio gestionado por crafteo-contenido */
}

/* Separador y subtítulo dentro del panel */
.separador-inventario {
  /* width: 90%;
  border: 0;
  height: 1px;
  background-color: #aaa;
  margin: 10px 0; */
  display: none; /* Ocultamos el separador para un look más limpio */
}

.subtitulo-panel { /* Para "Mesa de Crafteo" */
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1em;
  color: #eee;
  width: 100%;
}

/* Estilos para la sección de crafteo DENTRO del inventario */
/* Ocultar crafteo por defecto */
#crafteo-contenido {
    display: none;
    width: 100%; /* Asegurar que ocupe el ancho cuando sea visible */
}

/* Mostrar crafteo solo en modo crafteo */
#inventario-panel.modo-crafteo #crafteo-contenido {
    display: flex; /* O el display original que tenía, probablemente flex */
    flex-direction: column; /* Apilar título y área */
    align-items: center; /* Centrar contenido */
    gap: 10px;
    margin-top: 10px;
}

/* Área específica de slots y resultado */
#crafteo-area {
  display: flex; /* Convertir en flex container */
  flex-direction: column; /* Apilar título y zona interactiva */
  align-items: center; /* Centrar contenido horizontalmente */
  border-radius: 3px; /* Menos redondeado */
  /* height: 220px; <-- Quitamos altura fija */
  /* width: 80%; <-- Quitamos ancho fijo */
  width: 100%; /* Hacemos que ocupe todo el ancho de crafteo-contenido */
  gap: 10px; /* Espacio entre el título y la zona interactiva */
}

/* Nuevo contenedor para slots y resultado */
#crafteo-interactive-zone {
    display: flex; /* Poner slots y resultado en fila */
    flex-direction: row; /* Dirección horizontal */
    justify-content: center; /* Centrar horizontalmente */
    align-items: flex-start; /* Alinear arriba si tienen alturas distintas */
    gap: 10px; /* Espacio entre slots y resultado */
    width: 100%; /* Ocupar el ancho disponible dentro de crafteo-area */
}
/* Este es el contenedor directo de los slots y el resultado */
#crafteo-inventario {
  width: 100%; /* Ocupar ancho */
  display: flex; /* Slots y resultado lado a lado */
  flex-direction: row; /* Asegurar dirección horizontal (aunque es default) */
  justify-content: center; /* Centra los elementos horizontalmente */
  align-items: flex-start; /* Alinear arriba */
  gap: 10px;
}

#crafteo-inventario h3, #crafteo-area h3 {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1em;
  color: #ddd;
}
/* Contenedores internos de crafteo-area */
#crafteo-slots, #crafteo-resultado {
    border-radius: 3px; /* Menos redondeado */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    /* height: 80px; <-- Quitar altura fija, dejar que el contenido la determine */
    /* flex: 1; <-- Eliminado */
    /* width: 48%; <-- Eliminamos el ancho fijo/porcentaje */
    min-height: 100px; /* Altura mínima para que se vea bien */
}

/* Contenedor general de items (usado en inventario y crafteo) */
.items-container {
  display: flex;
  flex-wrap: wrap; /* Permite que los items pasen a la siguiente línea */
  gap: 5px; /* Espacio entre items */
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.1); /* Fondo ligeramente oscuro */
  border-radius: 2px; /* Menos redondeado */
  min-height: 50px; /* Altura mínima para que se vea incluso vacío */
  /* width: 100%; */ /* <-- Asegurarse que esto NO esté activo */
  /* width: 100%; */ /* <-- IMPORTANTE: Asegurarse que esto NO esté activo o cause problemas */
  /* Añadimos esto para que no ocupe más de lo necesario por defecto como hijo flex */
  flex-grow: 0; /* No crecer para ocupar espacio extra horizontal */
  flex-shrink: 0; /* No encoger si falta espacio (ajustar si es necesario) */
  /* width: auto; */ /* Por defecto, tomará el ancho de su contenido */
  box-sizing: border-box; /* Incluir padding y border en el ancho/alto */
}


/* --- ESTILOS PARA ITEMS INDIVIDUALES (Inventario y Crafteo) --- */

.inventario-item {
  width: 64px; /* Ancho fijo para cada 'slot' */
  height: 84px; /* Alto para imagen + texto */
  display: flex;
  flex-direction: column; /* Apila imagen y texto */
  align-items: center; /* Centra horizontalmente */
  justify-content: space-between; /* Espacio entre imagen y texto */
  background-color: rgba(255, 255, 255, 0.08); /* Fondo sutil, ligeramente más transparente */
  /* border: 1px solid #666; <-- Eliminado */
  border-radius: 4px;
  padding: 4px;
  box-sizing: border-box; /* Padding incluido en el tamaño */
  text-align: center;
  overflow: hidden; /* Evita que el texto largo se salga */
  font-family: sans-serif;
}
.inventario-item.equippable { /* Estilo para items equipables en el inventario */
    background-color: rgba(100, 150, 255, 0.2); /* Tinte azulado */
}

.inventario-item img {
  padding: 4px;
  box-sizing: border-box; /* Padding incluido en el tamaño */
  text-align: center;
  overflow: hidden; /* Evita que el texto largo se salga */
  font-family: sans-serif;
}

.inventario-item img {
  max-width: 50px; /* Tamaño máximo de la imagen */
  max-height: 50px;
  object-fit: contain; /* Asegura que la imagen quepa sin deformarse */
  margin-bottom: 4px; /* Espacio entre imagen y texto */
}

.inventario-item span {
  font-size: 0.8em; /* Texto pequeño */
  color: #ddd;
  white-space: nowrap; /* Evita saltos de línea */
  overflow: hidden; /* Oculta texto que no cabe */
  text-overflow: ellipsis; /* Añade '...' si el texto es muy largo */
  width: 100%; /* Ocupa el ancho para centrar bien */
  display: block; /* Asegura que ocupe el ancho */
}

/* Estilos para los items clicables y slots vacíos en Crafteo */
/* Cursor diferente según el modo */
.modo-uso #inventario-items .inventario-item {
    cursor: pointer; /* O un cursor específico de 'usar' */
}
.modo-crafteo #inventario-items .inventario-item {
    cursor: grab; /* O 'copy', 'cell' */
}

/* Items en los slots de crafteo */
#crafteo-slots .inventario-item {
  cursor: pointer; /* Indica que se puede hacer clic */
}
#crafteo-slots .inventario-item:hover,
/* Hover en inventario principal solo en modo crafteo */
#crafteo-inventario .inventario-item:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Resaltar al pasar el ratón */
}

#crafteo-resultado .inventario-item {
  cursor: pointer;
  /* border: 2px solid gold; <-- Eliminado */
  background-color: rgba(255, 215, 0, 0.15); /* Fondo dorado transparente para destacar */
}
#crafteo-resultado .inventario-item:hover {
   background-color: rgba(255, 215, 0, 0.25); /* Resaltar resultado un poco más */
}

.slot-vacio {
  background-color: rgba(0, 0, 0, 0.3);
  /* border: 1px dashed #666; <-- Eliminado */
  cursor: default;
  display: flex; /* Para centrar placeholder */
  align-items: center;
  justify-content: center;
}
.slot-vacio:hover {
    background-color: rgba(0, 0, 0, 0.3); /* Sin hover effect */
}
.placeholder-crafteo {
    color: #888;
    font-size: 0.8em;
    text-align: center;
    width: 100%;
}

/* Control de visibilidad basado en modo */
/* .modo-uso #crafteo-contenido { <-- Estas reglas ya están definidas arriba */
/*     display: none; */
/* } */
/* .modo-crafteo #crafteo-contenido { */
/*     display: flex; */ /* Mostrar sección de crafteo */
/* } */
/* Estilo para la herramienta activa flotando sobre el jugador */
#herramienta-activa {
  position: absolute;
  top: 25%; /* Un poco más arriba para compensar tamaño */
  left: 110%; /* Desplazado a la derecha del centro */
  transform: translateX(-50%);
  width: 70px; /* Un poco más grande */
    height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 11; /* Encima del jugador */
  pointer-events: none; /* No interferir con clics */
  /* La animación se aplicará con una clase */
  opacity: 0; /* Oculta por defecto */
  transition: opacity 0.2s ease-in-out;
}



/* --- ESTILOS NOTIFICACIONES --- */

#notificacion-container {
  position: fixed;
  top: 20px; /* Posición en la parte superior */
  left: 50%;
  transform: translateX(-50%); /* Centrado horizontal */
  z-index: 1100; /* Por encima de casi todo */
  display: flex;
  flex-direction: column; /* Nuevas notificaciones aparecen arriba y empujan las viejas hacia abajo */
  align-items: center;
  gap: 8px; /* Espacio entre notificaciones */
  pointer-events: none; /* No interferir con clics debajo */
}

.notificacion-mensaje {
  background-color: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 8px 15px;
  border-radius: 15px; /* Bordes redondeados */
  font-size: 0.9em;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  opacity: 1;
  transition: opacity 0.5s ease-out, transform 0.3s ease-out; /* Transición suave */
  transform: translateY(0); /* Estado inicial */
}

/* --- ESTILOS EQUIPAMIENTO RÁPIDO --- */

#equipamiento-rapido {
    position: fixed;
    bottom: 2%; /* Espacio desde abajo */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    z-index: 1000; /* Visible sobre el juego, debajo de paneles */
    background-color: rgba(30, 30, 30, 0.7); /* Fondo oscuro semitransparente */
    padding: 8px;
    border-radius: 5px;
    display: flex; /* Para alinear los slots */
    gap: 8px; /* Espacio entre slots */
}

#equipamiento-slots {
    /* Hereda de .items-container, pero podemos ajustar si es necesario */
    background-color: transparent; /* Sin fondo propio, usa el de #equipamiento-rapido */
    padding: 0; /* Sin padding extra */
    min-height: auto; /* No necesita altura mínima específica aquí */
    gap: 8px; /* Asegurar espacio entre slots */
}

/* Estilo específico para los items DENTRO de la barra de equipamiento */
#equipamiento-slots .inventario-item {
    /* Podríamos darles un borde o algo para diferenciarlos más, si se quiere */
}

/* Estilo para el slot seleccionado en la barra de equipamiento (CORREGIDO - Fuera de #equipamiento-rapido) */
#equipamiento-slots .inventario-item.slot-seleccionado {
  outline: 2px solid rgba(255, 255, 255, 0.8); /* Borde blanco suave */
  outline-offset: 1px;
}

/* Animación oscilante para la herramienta activa (CORREGIDO - Nivel superior) */
@keyframes oscilar-herramienta {
  0%, 100% {
      /* Ajustar el translateX si es necesario, pero el Y es el que oscila */
      transform: translate(-50%, 0px);
  }
  50% {
      transform: translate(-50%, -5px); /* Sube 5px */
  }
}
/* Clase para aplicar la animación (CORREGIDO - Nivel superior) */
.herramienta-oscilante {
  animation: oscilar-herramienta 1.5s ease-in-out infinite;
  opacity: 1 !important; /* Asegurar visibilidad cuando tiene la clase */
}

/* --- Añade esto a tu archivo style.css --- */

#barras-estado {
  width: 100%; /* Ancho completo */
  position: fixed;
  top: 2%; /* Alineado con la parte inferior de la barra de equipamiento */
  left: 50%;
   /* Centrado horizontal */
  display: flex;
  flex-direction: column; /* Apila las barras verticalmente */
  gap: 2px; /* Espacio entre barras */
  z-index: 1001; /* Asegura que esté sobre el mapa, etc. */
}

.barra-contenedor {transform: translateX(-50%);
  width: 50%; /* Ancho de las barras */
  height: 10px; /* Alto de las barras */
  background-color: #555; /* Color de fondo de la barra vacía */
  border: 0px solid #222;
  border-radius: 3px;
  overflow: hidden; /* Para que el relleno no se salga */
  box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
}

.barra-relleno {
  height: 100%;
  width: 100%; /* Inicialmente llenas */
  transition: width 0.3s ease-in-out; /* Transición suave al cambiar */
  border-radius: 2px; /* Ligeramente redondeado */
}

/* Colores específicos */
#barra-salud .barra-relleno {
  background-color: #e74d3c88; /* Rojo */
}

#barra-hambre .barra-relleno {
  background-color: #f1c40f7c; /* Amarillo */
}

#barra-sed .barra-relleno {
  background-color: #3498db86; /* Azul */
}

/* Ajusta el 'bottom' de la barra de equipamiento si es necesario */
#equipamiento-rapido {
  position: fixed;
  bottom: 10px; /* Mantenemos la distancia desde abajo */
  left: 50%; /* Lo movemos al centro horizontal */
  transform: translateX(-50%); /* Ajustamos para centrarlo perfectamente */
  /* ... otros estilos que ya tenías ... */
  z-index: 1000;
}

/* Ajusta el 'bottom' del botón de inventario si es necesario */
 

/* Ajusta el 'bottom' del panel de inventario si es necesario */
#inventario-panel {
  /* ... otros estilos ... */
  bottom: 60px; /* Ejemplo, ajusta para que no choque con la barra de equipamiento */
  /* ... */
  z-index: 1002;
}

/* Nota: Los estilos de #notificacion-container ya estaban definidos arriba para estar en la parte superior,
   así que no necesitamos ajustarlos aquí abajo. */

   /* Añade esto al final de tu archivo style.css o en una sección apropiada */

#ciclo-dia-noche-overlay {
  position: fixed; /* Fijo en la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* Inicialmente transparente */
  pointer-events: none; /* No intercepta clics */
  z-index: 5; /* Encima del mapa (asumiendo z-index < 5) pero debajo de la UI */
  transition: background-color 1.5s linear; /* Transición suave de color/opacidad */
}

#reloj-juego {
  position: fixed; /* Fijo en la pantalla */
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 14px;
  z-index: 1001; /* Encima del overlay y otros elementos UI como el inventario */
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Ajusta el z-index de otros elementos si es necesario */
#inventario-panel {
  /* ... otros estilos ... */
  z-index: 1000; /* Asegúrate de que esté por encima del overlay */
}

#dialogo {
  /* ... otros estilos ... */
  z-index: 1000; /* Asegúrate de que esté por encima del overlay */
}

#notificacion-container {
    /* ... otros estilos ... */
    z-index: 1002; /* Encima del reloj y todo lo demás */
}

#barras-estado, #equipamiento-rapido {
    z-index: 999; /* Encima del overlay pero potencialmente debajo del inventario/dialogo */
}

#boton-inventario {
    z-index: 1000; /* Encima del overlay */
}

/* Puede que necesites ajustar el z-index del jugador si interactúa con el overlay */
#jugador {
    position: fixed; /* Ya debería ser fixed o absolute */
    /* ... otros estilos ... */
    z-index: 10; /* Encima del overlay, debajo de la UI principal */
}