/* Estilo general */
body {
  margin: 0;
  padding: 0;
  background: url("https://fairy-land-of-tonath.neocities.org/gifs_uwu/caras.gif") repeat;
  background-color: #a2fccd;
  color: #fff;
  font-family: Arial, sans-serif;
}

.titulo-con-gif {
  position: relative;
  text-align: center; /* centra todo el contenido */
  margin: 0 auto;
  padding-top: 60px; /* deja espacio arriba para los gifs */
  width: 100%;
}

.fila-gifs {
  display: flex;
  justify-content: center; /* centra los gifs de la fila */
  gap: 10px;
  margin-bottom: 10px;
}

.titulo-retro {
  font-size: 50px;
  color: #fa9bdc;
  -webkit-text-stroke: 2px black;
  text-shadow: 0 0 10px orange;
  margin: 0; /* quita márgenes por defecto */
  display: flex; /* flex para centrar texto + gifs */
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.gif-titulo {
  width: 60px;
}

/* Texto centrado */
.texto {
    position: relative;
    font-size: 24px;
    color: white;
    z-index: 1;
    text-align: center;
}

/* Ventana flotante sin botones */

/* Ventana de datos personales */
.ventana-datos {
    position: fixed;
    top: 400px;
    right: 50px;
    width: 500px;
    height: 450px;
    padding: 15px;
    border: 3px solid pink;
    border-radius: 15px;
    background: url("https://fairy-land-of-tonath.neocities.org/gifs_uwu/background.gif");
    background-size: cover;
    text-align: center;
    box-shadow: 0 0 15px hotpink;
    color: white;
    font-family: monospace;
}
/* Título de la ventana de datos */
.ventana-datos h2 {
    color: white;              /* blanco */
    text-shadow: 0 0 8px pink; /* brillito ligero */
}

/* Texto de la ventana de datos */
.ventana-datos p {
    color: pink;               /* rosado */
    font-weight: bold;
    text-shadow: 0 0 8px pink;
}

/* Mona china */
.mona-flotante {
    position: fixed;
    top: 155px;
    right: 180px;
    transform: translateX(-50%);
    width: 240px;
    z-index: 2;
}

/* Gif cruz celta */
.gif-fondo {
    position: absolute;
    top: 1;
    left: 49%;
    transform: translate(-50%,-1%);
    width: 800px;
    z-index: -1;
    opacity: 0.3;
}

/* Contenedor del chat */
.chat-container {
  text-align: left;
  margin: 0px;
  top: 1500px; /* sube o baja el chat */
}


/* Chattable */
.chattable {
  display: inline-block;
  width: 480px;
  height: 1080px;
  border: 5px solid pink;
  border-radius: 20px;
  box-shadow: 0 0 15px hotpink;
}

/* Banner móvil */
.banner-mov {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px 0;
  margin-top: 50px;
  background: transparent;
}

.banner-mov img {
  width: 300px;
  height: 40px;
  margin-right: 40px;
}

.banner-mov img:last-child {
  margin-right: 0;
}
/* Ventana flotante extra */
/* Ventana flotante extra (ya la tienes, solo agregamos estilo a los links) */
.ventana-extra {
    position: fixed;
    top: 20px;
    right: 50px;
    width: 250px;
    padding: 15px;
    border: 3px solid pink;
    border-radius: 15px;
    background: url("https://fairy-land-of-tonath.neocities.org/gifs_uwu/background.gif");
    background-size: cover;
    text-align: center;
    box-shadow: 0 0 15px hotpink;
    color: white;
    font-family: monospace;
    text-shadow: 0 0 8px pink;
}

/* Enlaces dentro de la ventana */
.ventana-extra .link-menu {
    display: block;
    margin: 10px 0;
    font-size: 20px;
    color: pink;               /* color rosado */
    text-decoration: none;     /* quita el subrayado */
    font-weight: bold;
    transition: color 0.3s, text-shadow 0.3s;
}

.ventana-extra .link-menu:hover {
    color: white;              /* cambia a blanco al pasar el mouse */
    text-shadow: 0 0 10px hotpink;
font-family: monospace;
}

.deltarune-personaje {
  position: absolute;
  top: -2px;       /* lo sube/baja */
  left: 20px;        /* lo manda a la izquierda */
  width: 145px;
  image-rendering: pixelated;
}


.chattable {
  margin-top: -86px; /* número negativo lo sube */
}