/* Контейнер для изображения с полной адаптивностью */
.bum-image-container {
    position: fixed; /* Фиксированное позиционирование для сохранения внутри экрана */
    top: 50%;       /* Центрирование по вертикали */
    left: 50%;      /* Центрирование по горизонтали */
    transform: translate(-50%, -50%); /* Точное центрирование по центру */
    width: 45vw;     
    height: auto;    /* Высота пропорциональна ширине */
    max-width: 300px; /* Ограничение максимального размера */
    min-width: 100px; /* Минимальный размер для предотвращения слишком маленьких изображений */
    justify-content: center;  
    align-items: center;     
    z-index: 3;  
    border-radius: 50%;
}

/* Стили для изображения */
.bum-img {
    width: 100%;  
    height: auto; 
    border-radius: 50%;
    animation: bum-pulse 2s infinite alternate;
    cursor: pointer;
    user-select: none;           /* Отключает выделение */
    outline: none;               /* Убирает обводку */
    -webkit-tap-highlight-color: transparent; /* Убирает серый эффект на мобильных */
}


/* Контейнер для текста */
.bum-text-container {
    position: fixed;
    top: 10%; /* Текст всегда будет ближе к нижней границе экрана */
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto; /* Текст растягивается на 80% ширины экрана */
    max-width: none;
    text-align: center;
    padding: 0;
    z-index: 3;
   border-radius: 0;        
    box-shadow: none;        
    background: none;        
    border: none;           
}

/* Стили для текста */
.bum-text {
    font-size: 3vw; 
    color: #FFFFFF;
    font-weight: bold;
    animation: bum-fadeIn 3s infinite;
    text-align: center;
    text-shadow: 2px 2px 10px rgba(255, 105, 180, 0.9);
}

.bubble {
    position: absolute;
    background: white;
    border-radius: 50%;
    padding: 10px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 18px;
    color: black;
    text-align: center;
    transform: scale(1);
    z-index: 4;
    animation: float-up 1.5s ease-out forwards;
    user-select: none;           /* Отключает выделение */
    outline: none;  
}

.bubble::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

/* Анимация для изображения (пульсация) */
@keyframes bum-pulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 5px #b05f91;
    }
    to {
        transform: scale(1.1);
        box-shadow: 0 0 20px #b05f91;
    }
}

/* Анимация для текста (плавное появление) */
@keyframes bum-fadeIn {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-300px) scale(1.2);
        opacity: 0;
    }
}

/* Для мобильных устройств */
@media (max-width: 1200px),
       (max-width: 768px) {
    .bum-image-container {
        top: 45%;       /* Центрирование по вертикали */
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60vw;
        height: auto;
    }
    
    .bum-text-container {
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
}    

    .bum-text {
        font-size: 10vw;
    }
}

/* Для мобильных устройств в горизонтальном режиме */
@media (max-width: 1200px) and (orientation: landscape),
       (max-width: 768px) and (orientation: landscape) {
    .bum-image-container {
        top: 55%;       /* Центрирование по вертикали */
        left: 50%;
        transform: translate(-50%, -50%);
        width: 25vw;
        height: auto;
    }
     /* Контейнер для текста */
.bum-text-container {
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
	display:none;
}    
    .bum-text {
        
        font-size: 3vw;
    }
}