@import url('https://fonts.googleapis.com/css2?family=Rubik+Spray+Paint&display=swap');

body {
  background-image: url(http://soyadahir.neocities.org/dies%C3%B1o%20sij%20titulo%20pero%20eee.jpeg);
  background-repeat: no-repeat; 
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed; 

}

/* Limpieza rápida */
* { margin: 0; padding: 0; box-sizing: border-box; }

.muro-custom-player {
  position: fixed; 
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 350px; 
  font-family: 'Courier New', monospace;
  z-index: 1000;
}

.player-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Oculta la barrita gris por defecto del navegador */
#audio-motor { display: none; }

/* Estilo general de los botones invisibles */
.control-invisible { 
  background: transparent;
  position: absolute;
  border: none;
  cursor: pointer;
}

#btn-prev {
  top: 74%;
  left: 50%; 
  width: 7%; 
  height: 10%;
}

#btn-play {
  top: 74%;
  left: 52%; 
  width: 10%;
  height: 10%;
}

#btn-pause {
  top: 74%;
  left: 63%; 
  width: 10%; /* ¡Más ancho! */
  height: 10%;
}

#btn-stop {
  top: 74%;
  left: 75%; 
  width: 9%;
  height: 10%;
}

.borde-inferior {
  position: absolute;
  bottom: -13px; 
  left: 0;
  width: 100%; 
  pointer-events: none; 
}

.borde-izquierdo {
  position: absolute;
  transform: rotate(90deg); 
  width: 165px; 
  height: 60px;
  left: -97px; 
  bottom: 50px; 
  pointer-events: none; 
}

.borde-derecho {
  position: absolute;
  transform: rotate(90deg); 
  width: 165px; 
  height: 60px;
  right: -65px; 
  bottom: 50px; 
  pointer-events: none;
}

.borde-superior {
  position: absolute;
  top: -13px; 
  left: -10px;
  width: 105%; 
  height: 55px; 
  pointer-events: none;
}

#blood {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1; 
}

/* =========================================
   EL MURO PRINCIPAL (CAPA 2)
   ========================================= */
.muro-contenedor {
  position: relative; 
  z-index: 2; 
  background-image: url('https://soyadahir.neocities.org/sip.jpeg');
  background-size: cover; 
  background-position: center;
  background-color: #111; 
  width: 80%; 
  max-width: 800px; 
  
  /* Aquí controlas el scroll de la PC. Sube este número a tu gusto: */
  min-height: 1350px; 
  
  margin: 80px auto 400px auto;
  padding: 30px; 
  border: 2px solid #ff0000; 
}

.discos {
  position: absolute; 
  width: 220px; 
  top: 20px; 
  left: 560px; 
  z-index: 5; 
  pointer-events: none; 
  border-radius: 10px; 
}

/* =========================================
   1. REGLAS GENERALES (PARA PC)
   ========================================= */
.muertito-adorno {
  position: absolute;
  width: 80px;        /* Qué tan grande lo quieres en PC */
  top: 350px;         /* Ajusta la altura */
  left: 495px;        /* Ajusta la posición hacia los lados */
  z-index: 8;         /* Una capa alta para que no se esconda */
  pointer-events: none; /* Para que los clics lo atraviesen */
  
  /* 🔥 AQUÍ ESTÁ EL ARREGLO: El drop-shadow va junto dentro de filter */
  filter: grayscale(100%) brightness(1.5) contrast(1.2) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
  
  transform: rotate(90deg);
  height: auto;
}

.titulo-principal {
  position: absolute !important; /* 🔥 Obligamos a que sea absoluto */
  top: 35px !important;         /* 🎛️ Obligamos la altura (cámbialo si necesitas) */
  left: 10px !important;         /* 🎛️ Obligamos el lado (cámbialo si necesitas) */
  font-size: 88px;
  text-align: left;
  color: #808080;
  filter: brightness(0.60) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
  font-family: 'Rubik Spray Paint', sans-serif;
  z-index: 20; 
}

.linea-decorativa {
opacity: 0 !important;
}
/* 1. EL CONTENEDOR: Se encarga de la posición y de proyectar la luz libremente */
.contenedor-adorno {
    position: absolute;
    width: 115px;     
    right: -1px;      
    top: 36%;        
    z-index: 2;
    animation: resplandor-adorno-libre 3s ease-in-out infinite !important;
}

/* 2. LA IMAGEN: Se encarga de tu filtro de color y tus recortes exactos */
.adorno-med-der {
    width: 100%; /* Toma el tamaño de su contenedor */
    border-radius: 5px; 
    background-color: rgba(7, 0, 10, 0) !important;
    
    /* 🔥 Aquí regresamos tus tijeras exactas y tu color oscuro */
    clip-path: inset(px 0px 10px 0px);
    filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
}

/* 3. LA ANIMACIÓN (Solo maneja sombras puras) */
@keyframes resplandor-adorno-libre {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(255, 0, 0, 1));
  }
}

.adorno-med-der {
  position: absolute;
  top: 35.5%;          
  right: 19px;       
  width: 217px;       
  z-index: 7;        
  pointer-events: none; 
  clip-path: inset(22px 0px 22px 0px);
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
   border-radius: 30px; 
}

.adorno-superior-individual {
  position: absolute;
  top: -19px; 
  left: 520px;
  width: 100px;  
  z-index: 99;
  filter: brightness(0.77) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
}

.marco-libre {
  position: absolute; 
  top: 20px;
  left: 50%; 
  transform: translateX(162px); 
  width: 220px;        
  height: 490px;      
  object-fit: fill;   
  z-index: 6;        
  pointer-events: none; 
  border-radius: 10px; 
  filter: brightness(0.35) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
}

.imagen-centro {
  position: absolute;
  top: 12%;        
  left: 33%;
  transform: translateX(-50%); 
  width: 460px;       
  height: 550px;      
  object-fit: fill;   
  z-index: 3;      
     outline: 4px solid transparent !important;
  animation: pulso-negro-rojo 10s infinite ;
  
}

.gif-centro-bajo {
  position: absolute;
  top: 18.5%;          
  left: 79.5%;         
  transform: translateX(-50%); 
  width: 98.5px;  
  height: 75px; 
  z-index: 55;        
  pointer-events: none; 
}

.boton-grupo {
  position: absolute;
  top: 600px;         
  left: 75%;          
  transform: translateX(-50%);
  display: flex;
  flex-direction: column; 
  align-items: center;    
  text-decoration: none;  
  z-index: 5;
  transition: transform 0.1s ease;
}

.boton-grupo:active {
  transform: translateX(-50%) scale(0.90); 
}

.boton-icono {
  width: 67px;        
  height: auto;
  object-fit: contain;
  filter: brightness(0.89) contrast(1.6) sepia(1) hue-rotate(310deg) saturate(3.5);
}

.boton-texto {
  color: #ffffff;     
  font-size: 11px;    
  margin-top: 4px;    
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); 
  font-family: monospace; 
}

/* =========================================
   BOTÓN STEAM (COMPLETO)
   ========================================= */
.boton-steam {
  position: absolute;
  top: 595px;       
  left: 90%;        
  z-index: 5;
}

.boton-steam .boton-icono {
  width: 63px;
  height: auto;
  filter: brightness(1.6) contrast(1.4) drop-shadow(0 0 3px rgba(255, 0, 0, 0.4));
  position: relative;
  top: 4px;        
  left: 2px;        
}

.boton-steam .boton-texto {
  position: relative;
  top: 3px;          
  left: 2px;         
  margin-top: 4px;   
  font-family: monospace;
  text-transform: uppercase;
  font-size: 11px;   
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px #000;
}

.dot {
  width: 35px;
  height: 35px;
  position: fixed; 
  top: -50px;
  background: url('https://image.ibb.co/kyUHab/rose.png');
  background-size: 100% 100%;
  z-index: 1; 
  pointer-events: none; 
  animation: caerRosa linear infinite;
}

@keyframes caerRosa {
  0% {
    transform: translateY(0vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(360deg);
    opacity: 0.2;
  }
} /* 🔥 ¡ESTA ES LA LLAVE MÁGICA QUE TE FALTA PARA CERRAR LA ANIMACIÓN! */
  /* =========================================
   BOTÓN MÚSICA (COMPLETO)
   ========================================= */
.boton-musica {
  position: absolute;
  top: 10px;       /* Altura en la PC */
  left: 90%;        /* Columna derecha */
  z-index: 5;
}

.boton-musica .boton-icono {
  width: 59px;
  height: auto;
  
  /* 🔥 EL FILTRO ROJIZO APLICADO A LA FIGURA TRANSPARENTE: */
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5) drop-shadow(0 0 3px rgba(255, 0, 0, 0.4));
  
  position: relative;
  top: 690px;        
  left: 4px;        
}

.boton-musica .boton-texto {
  position: relative;
 top: 692px;        
  left: 4px;         
  margin-top: 4px;   
  font-family: monospace;
  text-transform: uppercase;
  font-size: 11px;   
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px #000;
} 
/* =========================================
   BOTÓN SUBSTACK (COMPLETO)
   ========================================= */
.boton-substack {
  position: absolute;
  top: 750px;       /* Un poco más abajo que el de música en PC */
  left: 90%;        /* Misma columna derecha */
  z-index: 5;
}

.boton-substack .boton-icono {
  width: 108px;
  height: auto;
  
  /* 🔥 EL FILTRO ROJIZO DE TU PÁGINA: */
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5) drop-shadow(0 0 3px rgba(255, 0, 0, 0.4));
  
  position: relative;
  top: -72px;        
  left: -118px;        
}

.boton-substack .boton-texto {
  position: relative;
  top: -96px;          
  left: -120px;         
  margin-top: 4px;   
  font-family: monospace;
  text-transform: uppercase;
  font-size: 11px;   
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px #000;
}

/* =========================================
   CITA DOSTOYEVSKI (PC)
   ========================================= */
.cita-monstruos {
  position: absolute;
  top: 740px;       /* Ajusta a qué altura quieres que aparezca */
  left: 33%;        /* Lo manda al centro */
  transform: translateX(-50%); /* Lo centra perfectamente */
  
  width: 450px;     /* Qué tan ancha es la caja */
  padding: 20px;
  
  /* 🔥 EL DISEÑO DE CUADRÍCULA NEGRA Y TEXTO BLANCO */
  background-color: #050505; 
  color: #ffffff;
  border: 1px solid #333;
  
  /* Esto dibuja la cuadrícula de fondo */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px; /* Tamaño de los cuadritos */
  
  /* Estilo del texto */
  font-family: monospace;
  font-size: 13px;
  line-height: 1.6;
  text-align: justify;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.8); /* Una sombra para que resalte */
  z-index: 5;
}

/* Le da un pequeño margen al texto por si acaso */
.cita-monstruos p {
  margin: 0;
}
.ancla-final {
  position: absolute;
  top: 1300px;      /* 🔥 Este número dicta dónde termina tu página */
  width: 1px;
  height: 1px;
  background: transparent;
}
.gif-nuevo-adahir {
  position: absolute;
  top: 960px;        /* 🎛️ Altura en la PC (bájala o súbela cambiando este número) */
  left: 40px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 450px;      /* 🎛️ Ancho del gif */
  height: auto;
  z-index: 7;        /* Para que flote sobre el fondo */
  pointer-events: none; /* Para que no estorbe si le dan clic */
/* El filtro rojizo característico de tu página */
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);

}
.gif-fuego {
  position: absolute;
  top: 720px;        /* 🎛️ Altura en la PC (ajústala a tu gusto) */
  left: 33px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 455px;      /* 🎛️ Ancho del gif */
height: 33px !important; /* 🎛️ Aquí defines exactamente qué tan alto verticalmente lo quieres */
  z-index: 10;        
  pointer-events: none; 
  

}
.gif-dragon {
  position: absolute;
  top: 755px;        /* 🎛️ Altura en la PC (ajústala donde prefieras) */
  left: 540px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 250px !important; /* 🔥 Sube este número (ej. 250px, 300px) para hacerlo más grande *
  height: auto;      /* Mantiene su proporción vertical */
  z-index: 9999;     /* 🔥 ESTO LO MANDA HASTA ADELANTE DE TODO */
  pointer-events: none; /* Para que los clics lo atraviesen */
   pointer-events: none;
  animation: energia-electrica 0.15s infinite !important; 
  /* El filtro rojizo para que combine con tu estética */
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
animation: resplandor-pulsante 0.10s infinite ease-in-out !important;
}
.gif-ingeniero {
  position: absolute;
  top: 130px;        /* 🎛️ Altura en la PC (ajústala a tu gusto) */
  left: 410px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 708px;      /* 🎛️ Tamaño grande */
  height: 59px !important;  
  z-index: 9999;     /* 🔥 Hasta adelante de todo */
  pointer-events: none; 
  
  /* 🔥 Recorte exacto del 30% por el lado izquierdo */
  clip-path: inset(0% 0% 0% 30%);
  
  /* El filtro rojizo para que combine con tu estética */
  filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
  transform: rotate(90deg) !important; /* 🎛️ Prueba con 90deg, -90deg o 180deg según hacia dónde quieras girarlo */
}
.imagen-discos-nuevos {
  position: absolute;
  top: 930px;        /* 🎛️ Altura en la PC (ajústala donde quieras) */
  left: 565px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 230px;      /* 🎛️ Tamaño de la imagen (súbelo o bájalo si lo quieres más grande/chico) */
  height: auto;      
  z-index: 10;        /* Capa flotante */
 
  pointer-events: none; /* Para que los clics la atraviesen */
  
  
}
.imagen-dolares {
  position: absolute;
  top: 1050px;        /* 🎛️ Altura en la PC (súbela o bájala a tu gusto) */
  left: 45px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 430px;      /* 🎛️ Tamaño de la imagen */
  height: auto;      
  
  pointer-events: none; /* Para que los clics la atraviesen */
  z-index: 2 !important; 
  outline: 4px solid transparent;
  animation: pulso-negro-rojo 2s infinite !important;
  
  
  
  /* El filtro rojizo para que combine con la estética de tu página */

}
@keyframes pulso-negro-rojo {
  0% {
    outline: 4px solid #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
  50% {
    outline: 4px solid #ff0000;
    box-shadow: 0 0 20px rgba(255, 0, 0, 1);
  }
  100% {
    outline: 4px solid #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }
}
.imagen-angel {
  position: absolute;
  top: 1160px;        /* 🎛️ Altura en la PC (ajústala a tu gusto) */
  left: 500px;       /* 🎛️ Posición hacia los lados en la PC */
  width: 100px;      /* 🎛️ Tamaño de la imagen */
  height: auto;      
  z-index: 11 !important;     /* 🔥 Hasta adelante de todo */
  pointer-events: none; /* Para que los clics la atraviesen */
  animation: resplandor-pulsante 3s ease-in-out infinite !important;
}
.imagen-dytam {
  position: absolute;
  top: 900px;        
  left: 480px;       
  width: 150px;      
  height: auto;      
  z-index: 99 !important; 
  pointer-events: none; 
  
  /* 🔥 EL TRUCO ESTRELLA: 
     1ro: brightness(0) invert(1) vuelve TODA la silueta blanca pura.
     2do: drop-shadow(...) le dibuja el difuminado rojo intenso debajo. */
  filter: brightness(0) invert(1) drop-shadow(0px 25px 30px rgba(255, 0, 0, 1)) !important;
}
@keyframes energia-electrica {
  0%, 100% { filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 10px #ff0000); }
  20% { filter: drop-shadow(3px -3px 3px #ffffff) drop-shadow(-3px 3px 8px #ff0000); }
  40% { filter: drop-shadow(-4px 2px 2px #ffffff) drop-shadow(4px -2px 6px #ff0000); }
  60% { filter: drop-shadow(2px 4px 4px #ffffff) drop-shadow(-2px -4px 10px #ff0000); }
  80% { filter: drop-shadow(-2px -3px 2px #ffffff) drop-shadow(2px 3px 5px #ff0000); }
}

.imagen-threshold {
  position: absolute;
  top: 900px;        
  left: 480px;       
  width: 150px;      
  height: auto;      
  z-index: 99 !important; 
  pointer-events: none; 
opacity: 0;
}
@keyframes resplandor-pulsante {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 25px rgba(255, 0, 0, 1)); }
}
.adorno-sup-der {
    position: absolute !important; 
    width: 200px;   
    top: -10px !important;      
    right: 700px !important;   
    z-index: 10;
    
    /* 🔥 ESTA LÍNEA LO HACE GIRAR */
    transform: rotate(-50deg) !important; 
  }
  .silenthill {
    position: absolute !important;
    top: 82px !important;    /* 🎛️ ALTURA: Sube o baja el GIF en tu muro */
    left: 597px !important;   /* 🎛️ LADOS: Muévelo de izquierda a derecha */
    
    /* 🎛️ CONTROLES DE TAMAÑO (ANCHO Y ALTO) */
    width: 102px !important;  
    height: 72px !important; 
    
    object-fit: cover !important; 
    
    /* 🎛️ CONTROLES DE ROTACIÓN */
    transform: rotate(-1deg) !important; 
    z-index: 10;
  }
  .bioshock {
    position: absolute !important;
    top: 405px !important;    /* 🎛️ ALTURA en PC */
    left: 640px !important;   /* 🎛️ LADOS en PC */
    
    width: 100px !important;  
    height: 69px !important; 
    object-fit: cover !important; 
     z-index: 120;
    
    /* 🎛️ ROTACIÓN: Número negativo para girarlo a la izquierda */
    transform: rotate(0deg) !important; 
    
    /* Por si quieres que tenga el mismo resplandor que el ángel, solo descomenta la línea de abajo */
    /* animation: resplandor-pulsante 2s infinite ease-in-out !important; */
  }
/* =========================================
   2. ZONA EXCLUSIVA PARA CELULARES
   ========================================= */
@media screen and (max-width: 768px) {
  
  /* 🔥 ELIMINAMOS EL BLOQUEO DE BODY Y HTML PARA QUE HAYA SCROLL */

  /* El cuadro rojo a la medida y con el margen de abajo para scrollear */
  .muro-contenedor {
    min-height: 650px !important;
    height: auto !important;      
    margin: 30px auto 250px auto !important; 
  }
  
  .muro-custom-player {
    max-width: 95%; 
    bottom: 30px;
    transform: translateX(-50%);
  }

  .discos {
    width: 33%;
    left: 195px;
    top: 15px; 
  } 

  .titulo-principal {
    position: absolute !important; /* 🔥 Lo volvemos absoluto en el cel también */
    top: 25px !important;         /* 🎛️ Sube o baja el título en el cel */
    left: 10px !important;         /* 🎛️ Muévelo a los lados en el cel */
    font-size: 32px; 
    filter: brightness(0.60) contrast(1.0) sepia(2) hue-rotate(310deg) saturate(5.5);
    font-family: 'Rubik Spray Paint', sans-serif;
    z-index: 20;
  }
  
 .adorno-sup-der {
    position: absolute !important; /* 🔥 LA LLAVE MÁGICA QUE FALTABA */
    width: 70px !important;       /* 🔥 Aumenté esto porque 10px es invisible */
    top: -10px !important;      
    right: 290px !important;    
    z-index: 20 !important;
    
    /* 🔥 SILUETA ROSA TOTAL */
    
}
  
  .adorno-superior-individual {
    width: 40px;  
    top: 0px;   
    left: 180px;
    z-index: 10; 
   
  }
  
 .adorno-med-der {
    position: absolute;  /* 🔥 ESTA ES LA LÍNEA QUE FALTABA PARA QUE SE MUEVA */
    width: 115px;     
    right: 19px;      
    top: 15px;        
    z-index: 2;
    background-color: rgba(7, 0, 10, 0) !important;
    animation: resplandor-adorno 3s ease-in-out infinite !important;
    pointer-events: none; 
    clip-path: inset(0px 0px 10px 3px);
    filter: brightness(0.80) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
    border-radius: 1px; 
}

  .marco-libre {
    width: 115px;       
    top: 12px;          
    left: 194px;         
    transform: none;    
    height: 243px;      
    object-fit: fill; 
    filter: brightness(0.35) contrast(1.3) sepia(1) hue-rotate(310deg) saturate(3.5);
     z-index:7;
  }

  .imagen-centro {
    width: 177px; 
    top: 10%;      
    left: 9px;         
    transform: none;    
    height: 310px;      
    object-fit: fill;   
    z-index: 3;
    outline: 4px solid transparent !important;
  animation: pulso-negro-rojo 10s infinite;
  }
  
  .gif-centro-bajo {
    width: 50px;   
    height: 37px;     
    top: 19.7%;        
    left: 203px;    
     z-index: 6;
     transform: rotate(-1deg) !important; 
     
  }
.boton-grupo:not(.boton-steam):not(.boton-musica):not(.boton-substack) {
    position: absolute !important;
    top: 310px !important;       
    
    /* 🔥 EL TRUCO PRO: Usamos porcentaje y centrado proporcional */
    left: 70% !important;                  /* 🎛️ Cambia este número (ej. 48% para izquierda, 55% para derecha) */
    transform: translateX(-50%) !important; /* Esto evita que se mueva entre navegadores */
    
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .boton-grupo:not(.boton-steam):not(.boton-musica):not(.boton-substack) .boton-icono {
    width: 33px !important;
    height: auto !important;
    margin: 0 auto !important;   
  }

  .boton-grupo:not(.boton-steam):not(.boton-musica):not(.boton-substack) .boton-texto {
    font-size: 5.5px !important;
    text-align: center !important;
    margin-top: 2px !important;
  }
  
  .linea-decorativa {
    top: 90px;
    font-size: 10px;
    opacity: 0.10;
    font-family: 'Rubik Spray Paint', sans-serif;
  }

  /* BOTÓN STEAM (CELULARES) */
  .boton-steam {
    position: absolute;
    top: 308px;        
    left: 269px;       
    transform: none;   
  }

  .boton-steam .boton-icono {
    width: 33px;       
    position: relative;
    top: 0px;          
    left: 0px;         
  }

  .boton-steam .boton-texto {
    font-size: 5.8px;   
    position: relative;
    top: -2px;          
    left: 0px;         
    margin-top: 3.3px;   
  }
  .muertito-adorno {
    width: 27px;     
    top: 0px;      
    left: 82px;      
    transform: none !important;
}
/* =========================================
     BOTÓN MÚSICA (CELULARES)
     ========================================= */
  .boton-musica {
    position: absolute;
    top: 361px;        /* Altura en la pantalla del celular */
    left: 260px;       /* Misma columna que el de Steam */
    transform: none;   
  }

  .boton-musica .boton-icono {
    width: 30px;       
    position: relative;
    top: 0px;          
    left: 13px;         
  }

  .boton-musica .boton-texto {
    font-size: 5.8px;   
    position: relative;
    top: 0px;          
    left: 13px;         
    margin-top: 3.3px;   
  } 
  /* =========================================
     /* =========================================
     BOTÓN SUBSTACK (CELULARES)
     ========================================= */
  .boton-substack {
    position: absolute;
    top: 349px;        /* Un poco más abajo del de música en el cel */
    left: 202px;       /* Misma columna */
    transform: none;   
  }

  .boton-substack .boton-icono {
    width: 55px;       
    position: relative;
    top: 0px;          
    left: 0px;         
  }

  .boton-substack .boton-texto {
    font-size: 5.8px;   
    position: relative;
    top:-12.5px;          
    left: 0px;         
    margin-top: 3.3px;   
  } 
  /* =========================================
     CITA DOSTOYEVSKI (CELULARES)
     ========================================= */
  .cita-monstruos {
    position: absolute !important;
    top:400px !important;
    
    /* 🎛️ Si al alargarlo se mueve mucho, ajusta este número de los lados */
    left: 15px !important; 
    
    /* 🔥 1. AUMENTAMOS EL ANCHO BASE (De 250px a 320px para que se haga más ancho) */
    width: 315px !important;
    max-width: 315px !important;
    
    /* 🔥 2. SUBIMOS UN POCO LA ESCALA (De 0.45 a 0.5 para darle mejor proporciones) */
    transform: scale(0.5) !important;
    transform-origin: top left !important;
    
    padding: 12px !important;
    box-sizing: border-box !important;
    font-size: 12px !important;
    
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  .gif-nuevo-adahir {
    top: 516px !important;   /* 🎛️ Altura en el celular */
    left: 13px !important;   /* 🎛️ Posición hacia los lados en el celular */
    width: 165px !important;  /* 🎛️ Ancho más pequeño para celular */
    z-index: 10;
  }
  .gif-fuego {
    top: 385px !important;   /* 🎛️ Altura en el celular */
    left: 12px !important;   /* 🎛️ Posición hacia los lados en el celular */
    width: 165px !important;  /* 🎛️ Ancho para celular */
    height: 23px !important; /* 🎛️ Aquí defines exactamente qué tan alto verticalmente lo quieres */
    
    /* 🔥 EL TRUCO ROSADO TAMBIÉN PARA EL CELULAR */
   
  }
  .gif-dragon {
    top: 390px !important;   /* 🎛️ Altura en el celular */
    left: 240px !important;   /* 🎛️ Posición hacia los lados en el celular */
    width: 100px !important;  /* 🎛️ Ancho para el celular */
    z-index: 9999 !important;/* 🔥 Hasta adelante también en el cel */
    animation: resplandor-pulsante 0.50s ease-in-out infinite !important;
  }
  /* 🔥 LA APROXIMACIÓN GIRADA Y RECORTADA PARA CELULAR */
  .gif-ingeniero {
    position: absolute !important;
    
    /* 🎛️ 1. POSICIÓN (Aproximada para el centro-izquierda del muro) */
    top: 60px !important;    
    left: 130px !important;    
    
    /* 🎛️ 2. TAMAÑO (Miniatura para que quepa en la pantalla) */
    /* Tomamos tu ancho de 708px y lo dividimos entre 4.5 aprox. */
    width: 350px !important;  
    /* Y tu alto de 59px lo reducimos también */
    height: 50px !important;  
    
    /* 🔥 3. GIRO (Girado verticalmente) */
    transform: rotate(90deg) !important;
    
    /* 🔥 4. RECORTE (Mismo recorte del 30% por la izquierda original) */
    clip-path: inset(0% 0% 0% 30%) !important;
    
    /* 5. DEMÁS PROPIEDADES (Fijas para que se vea bien) */
    z-index: 9999 !important;
    pointer-events: none !important;
    /* 🔥 FILTRADO A BLANCO INTENSO */
  filter: brightness(1) contrast(1.5) saturate(0) !important;
    /* Aseguramos que no tenga borde rosa por error */
    border: none !important;
    background: transparent !important;
  }
  .imagen-discos-nuevos {
    top: 470px !important;   /* 🎛️ Altura en el celular */
    left: 225px !important;   /* 🎛️ Posición hacia los lados en el celular */
    width: 100px !important; /* 🎛️ Ancho para el celular */
    z-index: 10 !important;
  }
  .imagen-dolares {
    top: 547px !important;   
    left: 18px !important;   
    width: 155px !important; 
    z-index: 10 !important; 
    
    /* 🔥 LA BASE Y LA ANIMACIÓN PARA EL CELULAR */
    outline: 4px solid transparent !important;
    animation: pulso-negro-rojo 2s infinite !important;
  }
  .imagen-angel {
    top: 565px !important;   /* 🎛️ Altura en el celular */
    left: 190px !important;    /* 🎛️ Posición hacia los lados en el celular */
    width: 39px !important;  /* 🎛️ Ancho para el celular */
    z-index: 9 !important; /* 🔥 Hasta adelante en el cel */
  }
  .imagen-dytam {
    top: 441px !important;   
    left: 170px !important;   
    width: 80px !important; 
    z-index: 9 !important;
    filter: brightness(0) invert(1) drop-shadow(0px 15px 20px rgba(255, 0, 0, 1)) !important;
  }
   .imagen-threshold {
    top: 450px !important;   /* 🎛️ Súbela o bájala en el celular */
    left: 230px !important;  /* 🎛️ Muévela a los lados */
    width: 55px !important;  /* 🎛️ Tamaño para móvil */
    z-index: 9 !important;
    
    /* 🔥 LA MAGIA: Esto cancela la invisibilidad de la PC */
    opacity: 1 !important; 
     animation: energia-electrica 0.15s infinite !important; 


  }
  /* 📱 ESTO VA DENTRO DE TU ZONA DE CELULARES (@media) */
  .silenthill {
    position: absolute !important;
    
    /* 🎛️ ALTURA Y LADOS (Adaptados para la pantallita del celular) */
   left: 65% !important;
    top: 6.9% !important;    /* Seguramente lo tendrás que bajar o subir diferente que en PC */
    
    /* 🎛️ TAMAÑO EN CELULAR */
    width: 48px !important;  /* Un poco más pequeño para que no estorbe */
    height: 36px !important; 
    object-fit: cover !important; 
    
    /* 🎛️ ROTACIÓN EN CELULAR */
    transform: rotate(-1deg) !important; 
  }
  /* 📱 ESTO VA DENTRO DE TU ZONA DE CELULARES (@media) */
  .bioshock {
    top: 202px !important;    /* 🎛️ ALTURA en celular */
    left: 234px !important;    /* 🎛️ LADOS en celular */
    
    width: 50px !important;  
    height: 35px !important; 
    
    transform: rotate(0deg) !important; 
  }
}