/* =====================================================
   MUNDOS — SALA CENTRAL  ·  estilos visuales
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

/* ---------- estado de conexión ---------- */

#estado {
  position: fixed;
  top: 0.8rem;
  left: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: #eafff0;
  background: rgba(10, 20, 15, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

#estado::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  flex-shrink: 0;
}

/* ---------- mundo ---------- */
.mundo-sala {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* esto recorta el "visor" de la cámara */
}

.mundo-sala__mundo {
  position: absolute;
  left: 50%;
  top: 50%;
  /* el transform de paneo lo controla JS en cada frame de movimiento */
  will-change: transform;

  transition: transform 0.12s linear;
}

.mundo-sala__fondo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  /* el mapa necesita su tamaño real en píxeles para que la
     cámara tenga límites reales que respetar */
  z-index: 0;
}

/* viñeta suave para dar profundidad al escenario, no interfiere con clics */
.mundo-sala::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 12vw rgba(0, 0, 0, 0.45);
  z-index: 500;
}

/* ---------- sprites ---------- */

.mundo-sala__sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform 0.12s linear;
}

.mundo-sala__sprite-zoom {
  display: inline-block;
  transform: scale(4);
  filter: drop-shadow(0 7px 4px rgba(0, 0, 0, 0.4));
}

.mundo-sala__sprite-img {
  display: block;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}

.mundo-sala__sprite-img.mira-izquierda {
  transform: scaleX(-1);
}

.mundo-sala__apodo {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  margin-bottom: 0.35rem;
}

.mundo-sala__burbuja {
  position: absolute;
  bottom: calc(100% + 1.4rem);
  left: 50%;
  transform: translateX(-50%);

  width: auto;
  min-width: 60px;
  max-width: 220px;
  padding: 0.8rem 1rem;

  background-image: url('../../../assets/img/botones/botones1.png');
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: 50% 100%;

  image-rendering: pixelated;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.3));

  font-family: 'VT323', monospace;
  font-size: 1.05rem;
  line-height: 1.15;
  text-align: center;
  color: #000;

  z-index: 9999;
  animation: burbuja-aparece 0.15s ease-out;
}

@keyframes burbuja-aparece {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------- D-pad móvil ---------- */

.mundo-sala__dpad {
  position: fixed;
  bottom: 5.5rem;
  right: 1.2rem;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  background: rgba(10, 20, 15, 0.4);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.mundo-sala__dpad-btn {
  border: none;
  background-color: transparent;
  background-image: url('../../../assets/img/botones/botones1.png');
  background-repeat: no-repeat;
  background-size: 300% 300%;

  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  image-rendering: pixelated;
  color: transparent;
  transition: transform 0.08s ease, filter 0.08s ease;
}

.mundo-sala__dpad-btn:hover {
  filter: brightness(1.1);
}

.mundo-sala__dpad-btn:active {
  filter: brightness(0.75);
  transform: scale(0.9);
}

.mundo-sala__dpad-btn--arriba {
  grid-column: 2; grid-row: 1;
  background-position: 0% 0%;
}

.mundo-sala__dpad-btn--izquierda {
  grid-column: 1; grid-row: 2;
  background-position: 50% 0%;
}
.mundo-sala__dpad-btn--derecha {
  grid-column: 3; grid-row: 2;
  background-position: 100% 0%;
}

.mundo-sala__dpad-btn--abajo {
  grid-column: 2; grid-row: 3;
  background-position: 0% 50%;
}

/* ---------- chat ---------- */

.mundo-sala__chat {
  position: fixed;
  bottom: 0.8rem;
  left: 0.8rem;
  right: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;

  background: rgba(10, 20, 15, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);

  z-index: 9999;
}

.mundo-sala__chat-input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #111;
  outline: none;
  transition: box-shadow 0.15s ease;
}

.mundo-sala__chat-input:focus {
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.45);
}

.mundo-sala__chat-enviar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background-image: url('../../../assets/img/botones/botones1.png');
  background-size: 300% 300%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  image-rendering: pixelated;
  transition: transform 0.1s ease, filter 0.1s ease;
}

.mundo-sala__chat-enviar:hover {
  filter: brightness(1.1);
}

.mundo-sala__chat-enviar:active {
  transform: scale(0.9);
}

#char-counter {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: #dfffe8;
  min-width: 44px;
  text-align: right;
}   

/* ---------- objetos del escenario ---------- */

.mundo-objeto {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.mundo-objeto img {
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 3px rgba(0, 0, 0, 0.5));
}

/* ---------- casita principal — foco de luz de la escena ---------- */

.mundo-objeto--casita-principal {
  /* la casita queda por encima del resto de objetos del escenario */
  z-index: 5;
}

.mundo-objeto--casita-principal img {
  /* glow cálido en capas: silueta + halo difuso + halo amplio */
  filter:
    brightness(1.12)
    saturate(1.25)
    drop-shadow(0 10px 3px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 14px rgba(255, 214, 120, 0.85))
    drop-shadow(0 0 34px rgba(255, 190, 80, 0.55));
  animation: casita-resplandor 3.2s ease-in-out infinite;
}

/* halo suave detrás de la casita, más ancho que el sprite */
.mundo-objeto--casita-principal::before {
  content: '';
  position: absolute;
  inset: -20% -15%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 214, 120, 0.35) 0%,
    rgba(255, 214, 120, 0.12) 45%,
    transparent 75%
  );
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
  animation: casita-halo 3.2s ease-in-out infinite;
}

@keyframes casita-resplandor {
  0%, 100% {
    filter:
      brightness(1.12)
      saturate(1.25)
      drop-shadow(0 10px 3px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 14px rgba(255, 214, 120, 0.85))
      drop-shadow(0 0 34px rgba(255, 190, 80, 0.55));
  }
  50% {
    filter:
      brightness(1.22)
      saturate(1.35)
      drop-shadow(0 10px 3px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 20px rgba(255, 214, 120, 1))
      drop-shadow(0 0 46px rgba(255, 190, 80, 0.75));
  }
}

@keyframes casita-halo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ---------- partículas ascendentes de la casita ---------- */

.mundo-objeto--casita-principal__particulas {
  position: absolute;
  inset: -30% 0 0 0;   /* margen extra arriba para que suban lejos del sprite */
  pointer-events: none;
  z-index: 2;           /* por encima de la imagen de la casita, dentro del mismo contenedor */
}

.mundo-objeto--casita-principal__particula {
  position: absolute;
  bottom: 20%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 245, 210, 1) 0%,
    rgba(255, 210, 120, 0.9) 55%,
    transparent 100%
  );
  box-shadow: 0 0 10px 4px rgba(188, 127, 4, 0.85);
  opacity: 0;
  animation: casita-particula 4.5s ease-in infinite;
}

.mundo-objeto--casita-principal__particula:nth-child(1) { left: 15%; animation-delay: 0s;    }
.mundo-objeto--casita-principal__particula:nth-child(2) { left: 32%; animation-delay: 0.9s;  }
.mundo-objeto--casita-principal__particula:nth-child(3) { left: 48%; animation-delay: 1.8s;  }
.mundo-objeto--casita-principal__particula:nth-child(4) { left: 63%; animation-delay: 0.4s;  }
.mundo-objeto--casita-principal__particula:nth-child(5) { left: 78%; animation-delay: 2.6s;  }
.mundo-objeto--casita-principal__particula:nth-child(6) { left: 90%; animation-delay: 1.3s;  }

.mundo-objeto--casita-principal__particula:nth-child(odd) {
  width: 7px;
  height: 7px;
  animation-duration: 5.2s;
}

.mundo-objeto--casita-principal__particula:nth-child(3n) {
  width: 13px;
  height: 13px;
  animation-duration: 3.8s;
}

@keyframes casita-particula {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  50% {
    transform: translateY(-140px) translateX(10px) scale(1);
  }
  85% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-260px) translateX(-8px) scale(0.4);
  }
}

/* ---------- panel de jugador (click en sprite ajeno) ---------- */

.panel-jugador {
  position: fixed;
  /* ESPACIO PARA AJUSTAR: posición del panel en pantalla */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;

  /* ESPACIO PARA AJUSTAR: tamaño del panel completo */
  width: 220px;
  min-height: 260px;

  /* ESPACIO PARA AJUSTAR: padding interno, para que el contenido
     no se pegue a los bordes del marco pixel-art */
  padding: 1.6rem 1.2rem 1.2rem;
  box-sizing: border-box;

  /* El marco entero ahora usa el sprite de fondo */
  background-image: url('../../../assets/img/botones/botones1.png');
  background-repeat: no-repeat;
  /* ESPACIO PARA AJUSTAR: coordenadas/tamaño del marco grande dentro del PNG */
  background-size: 300% 300%;
  background-position: 100% 100%;
  image-rendering: pixelated;

  z-index: 10000;
}

.panel-jugador__capsula {
  /* Ya no lleva su propio fondo — solo contiene el sprite del personaje */
  width: 100%;
  /* ESPACIO PARA AJUSTAR: alto del área donde se ve el personaje */
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-jugador__sprite {
  /* ESPACIO PARA AJUSTAR: tamaño del personaje dentro del marco */
  width: auto;
  height: 90%;
  image-rendering: pixelated;
}

.panel-jugador__nombre {
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

.panel-jugador__mensaje {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

.panel-jugador__boton-amistad {
  /* Sprite del botón 100x50, separado, dentro del marco */
  width: 60px;
  height: 50px;

  background-image: url('../../../assets/img/botones/botones1.png');
  background-repeat: no-repeat;
  /* ESPACIO PARA AJUSTAR: coordenadas del sprite 100x50 dentro del PNG */
  background-size: 300% 300%;
  background-position: 100% 50%;
  image-rendering: pixelated;

  border: none;
  cursor: pointer;
  background-color: transparent;
}

.panel-jugador__cerrar {
  position: absolute;
  /* ESPACIO PARA AJUSTAR: posición de la X respecto al panel */
  top: 0.3rem;
  right: 0.3rem;

  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.panel-jugador__cerrar:hover {
  background: rgba(0, 0, 0, 0.75);
}

/*-------------------panel de amistad---------------------*/
.panel-jugador__mensaje-amistad {
  margin: 0.3rem 0 0;
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: #09aa44;
  text-align: center;
  text-shadow: none;
}

.panel-jugador__mensaje-amistad--error {
  color: #d70808;
}

.panel-jugador__boton-amistad:disabled {
  filter: brightness(0.75);
  transform: scale(0.9);
  cursor: not-allowed;
}

.panel-amistades__boton {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;

  backdrop-filter: blur(4px);
  font-size: 1.2rem;
  cursor: pointer;

  background-image: url('../../../assets/img/botones/botones1.png');
  background-repeat: no-repeat;
  /* ESPACIO PARA AJUSTAR: coordenadas del sprite 100x50 dentro del PNG */
  background-size: 300% 300%;
  background-position: 100% 50%;
  image-rendering: pixelated;

  z-index: 9999;
}

.panel-amistades {
  position: fixed;
  top: 3.4rem;
  right: 0.8rem;
  width: 260px;
  max-height: 60vh;
  background: rgba(10, 20, 15, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  overflow: hidden;
  z-index: 9999;
}

.panel-amistades__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.panel-amistades__titulo {
  margin: 0;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #fff;
}

.panel-amistades__cerrar {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

.panel-amistades__lista {
  padding: 0.6rem 0.9rem;
  max-height: calc(60vh - 3rem);
  overflow-y: auto;
}

.panel-amistades__boton--aviso::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d70808;
  box-shadow: 0 0 4px #900404;
}

.panel-amistades__item {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'VT323', monospace;
  color: #eafff0;
}

.panel-amistades__item:last-child {
  border-bottom: none;
}

.panel-amistades__item p {
  margin: 0 0 0.4rem;
}

.panel-amistades__item button {
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  padding: 0.3rem 0.7rem;
  margin-right: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.panel-amistades__item button:hover {
  background: rgba(255, 255, 255, 0.2);
}

.panel-amistades__estado {
  display: inline-block;
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}

.panel-amistades__estado--pendiente {
  background: rgba(250, 204, 21, 0.2);
  color: #facc15;
}

.panel-amistades__estado--aceptada {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.panel-amistades__estado--rechazada {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}




/* ---------- cortina de transición entre salas ---------- */

.hg-cortina {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.6s ease;
}

.hg-cortina--abierta {
  opacity: 0;
}

/* ---------- portal ---------- */

.mundo-portal {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;

  /* color base editable desde el inspector o desde portales.js */
  --portal-color: 255, 178, 90;

  background: radial-gradient(
    circle at center,
    rgba(255, 250, 235, 0.9) 0%,
    rgba(var(--portal-color), 0.85) 22%,
    rgba(var(--portal-color), 0.55) 42%,
    rgba(var(--portal-color), 0.25) 62%,
    rgba(var(--portal-color), 0.08) 82%,
    transparent 100%
  );

  filter: blur(2px);
  box-shadow: 0 0 24px 9px rgba(var(--portal-color), 0.45);

  animation: portal-respirar 4.5s ease-in-out infinite;
}

/* halo exterior, mucho más difuso y grande que el círculo principal
   -> es lo que evita que se vea "cortado" en un borde duro */
.mundo-portal::after {
  content: '';
  position: absolute;
  inset: -45%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(var(--portal-color), 0.3) 0%,
    rgba(var(--portal-color), 0.12) 45%,
    transparent 78%
  );
  filter: blur(14px);
  z-index: -1;
  animation: portal-respirar 4.5s ease-in-out infinite reverse;
}

/* brillo interno descentrado que orbita despacio
   -> da el giro, pero sutil: no un remolino, solo un punto de luz
      moviéndose lento alrededor del centro */
.mundo-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.6) 0%,
    transparent 45%
  );
  filter: blur(4px);
  animation: portal-girar 11s linear infinite;
}

@keyframes portal-girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes portal-respirar {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.95; }
  50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1;    }
}

/* ---------- rectángulo real del hitbox (solo debug) ---------- */

.mundo-portal__hitbox {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000; /* por encima de todo, para verlo siempre mientras probás */

  border: 2px dashed rgba(0, 255, 200, 0.9);
  background: rgba(0, 255, 200, 0.08);
}