/* Магический шар */

.m8b-container {
    text-align: center;
    padding: 5px;
    max-width: 500px;
    margin: 0 auto;
}

/* Контейнер шара */
.m8b-ball-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.m8b-ball-container:hover {
    transform: scale(1.05);
}

.m8b-ball {
    width: 100%;
    height: 100%;
    position: relative;
    animation: m8b-float 6s ease-in-out infinite;
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
    background: transparent;
}

.m8b-ball-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    image-rendering: auto;
    -webkit-tap-highlight-color: transparent;
}

@keyframes m8b-float {
    0%, 100% { 
        transform: translateY(0) rotateZ(0deg);
    }
    50% { 
        transform: translateY(-20px) rotateZ(-2deg);
    }
}

/* Встряхивание; пока ждём ответ (ИИ — до 12 с), шар снова парит, а не замирает */
.m8b-ball.shaking {
    animation: m8b-shake 1.2s ease-in-out, m8b-float 6s ease-in-out 1.2s infinite;
}

@keyframes m8b-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    5% { transform: translate(-8px, 3px) rotate(-5deg); }
    10% { transform: translate(5px, -8px) rotate(8deg); }
    15% { transform: translate(-3px, 6px) rotate(-3deg); }
    20% { transform: translate(7px, -4px) rotate(6deg); }
    25% { transform: translate(-6px, -7px) rotate(-8deg); }
    30% { transform: translate(4px, 5px) rotate(4deg); }
    35% { transform: translate(-5px, -3px) rotate(-6deg); }
    40% { transform: translate(8px, 2px) rotate(7deg); }
    45% { transform: translate(-2px, -6px) rotate(-4deg); }
    50% { transform: translate(6px, 4px) rotate(5deg); }
    55% { transform: translate(-4px, -5px) rotate(-7deg); }
    60% { transform: translate(3px, 7px) rotate(3deg); }
    65% { transform: translate(-7px, -2px) rotate(-5deg); }
    70% { transform: translate(5px, 3px) rotate(6deg); }
    75% { transform: translate(-3px, -4px) rotate(-3deg); }
    80% { transform: translate(2px, 5px) rotate(4deg); }
    85% { transform: translate(-5px, -3px) rotate(-2deg); }
    90% { transform: translate(3px, 2px) rotate(2deg); }
    95% { transform: translate(-1px, -2px) rotate(-1deg); }
}

/* Окошко с ответом */
.m8b-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle at 50% 40%, #000000, #000000);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 
        inset 0 0 30px rgba(0,0,0,0.8),
        inset 0 10px 20px rgba(0,0,0,0.8);
    border: 3px solid rgba(0,0,0,1);
    z-index: 10;
    transition: transform 0.15s ease-out;
}

/* Стеклянный эффект на окошке */
.m8b-window::before {
    content: '';
    position: absolute;
    top: 3%;
    left: 10%;
    right: 10%;
    height: 25%;
    background: linear-gradient(180deg, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.05) 30%,
        transparent 60%);
    border-radius: 50%;
    filter: blur(1px);
}

/* Внутренняя обводка окошка */
.m8b-window::after {
    content: '';
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 50%;
    border: 2px solid rgba(0,50,100,0.3);
    box-shadow: 
        inset 0 0 20px rgba(0,100,200,0.2),
        0 0 10px rgba(0,100,200,0.2);
}

/* Цифра 8 на фоне */
.m8b-eight {
    position: absolute;
    font-size: 80px;
    font-weight: bold;
    color: rgba(255,255,255,0.08);
    font-family: Arial, sans-serif;
    user-select: none;
    z-index: 1;
}

/* Эффект жидкости */
.m8b-liquid {
    position: absolute;
    bottom: -20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, 
        rgba(0,20,40,0.6) 0%, 
        rgba(0,30,60,0.3) 20%,
        transparent 40%);
    animation: m8b-wave 4s ease-in-out infinite;
}

.m8b-liquid-layer2 {
    position: absolute;
    bottom: -25px;
    width: 110%;
    height: 100%;
    left: -5%;
    background: linear-gradient(5deg, 
        rgba(0,40,80,0.3) 0%, 
        rgba(0,20,40,0.2) 25%,
        transparent 45%);
    animation: m8b-wave2 5s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes m8b-wave {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scaleX(1);
    }
    25% {
        transform: translateY(-8px) rotate(2deg) scaleX(1.05);
    }
    50% { 
        transform: translateY(-15px) rotate(-1deg) scaleX(0.95);
    }
    75% {
        transform: translateY(-5px) rotate(1deg) scaleX(1.02);
    }
}

@keyframes m8b-wave2 {
    0%, 100% { 
        transform: translateY(0) rotate(-1deg) scaleX(1);
    }
    33% {
        transform: translateY(-12px) rotate(1deg) scaleX(0.98);
    }
    66% { 
        transform: translateY(-7px) rotate(-2deg) scaleX(1.03);
    }
}

/* Пузырьки */
.m8b-bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}

.m8b-bubble {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, 
        rgba(255,255,255,0.2), 
        rgba(255,255,255,0.1) 40%, 
        transparent 60%);
    border-radius: 50%;
    opacity: 0;
    animation: m8b-rise 4s infinite;
}

.m8b-bubble::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 50%);
    border-radius: 50%;
}

.m8b-bubble1 {
    width: 6px;
    height: 6px;
    left: 20%;
    animation-delay: 0s;
    animation-duration: 4s;
}

.m8b-bubble2 {
    width: 4px;
    height: 4px;
    left: 50%;
    animation-delay: 1s;
    animation-duration: 5s;
}

.m8b-bubble3 {
    width: 8px;
    height: 8px;
    left: 70%;
    animation-delay: 2s;
    animation-duration: 3.5s;
}

.m8b-bubble4 {
    width: 3px;
    height: 3px;
    left: 40%;
    animation-delay: 1.5s;
    animation-duration: 4.5s;
}

.m8b-bubble5 {
    width: 5px;
    height: 5px;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 6s;
}

@keyframes m8b-rise {
    0% {
        bottom: -10px;
        opacity: 0;
        transform: translateX(0) scale(1);
    }
    10% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
        transform: translateX(10px) scale(1.1);
    }
    90% {
        opacity: 0.2;
        transform: translateX(-5px) scale(0.9);
    }
    100% {
        bottom: 90%;
        opacity: 0;
        transform: translateX(15px) scale(0.8);
    }
}

/* Ответ */
.m8b-answer {
    color: #00ff88;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    /* Бока — 6px: самое длинное слово ответов («Сконцентрируйся», 126px) помещается в строку целиком */
    padding: 10px 6px;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    text-shadow: 
        0 0 20px rgba(0, 255, 136, 1),
        0 0 10px rgba(0, 255, 136, 0.8),
        0 0 5px rgba(0, 255, 136, 0.6);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    position: relative;
    z-index: 10;
    max-width: 100%;
    max-height: 80%;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    /* Без переносов по слогам: в окошке выходило «ду-май», «спро-си» */
    -webkit-hyphens: manual;
    hyphens: manual;
    white-space: pre-line; /* переносы строк в ответе — как прислал оракул */
    display: flex;
    align-items: center;
    justify-content: center;
}

.m8b-answer.show {
    opacity: 1;
}

/* Поле — общее классическое (assets/common/css/rg-question.css) */
.m8b-container .rg-question {
    max-width: 400px;
}

.m8b-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

/* Кнопка - стиль темы gadanie-online (картинка) */
.m8b-container .m8b-ask-button {
    /* Размеры для retina (470x130 / 2) */
    width: 235px;
    height: 65px;
    /* Фон-картинка */
    background-color: #f1e7d4;
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka.webp');
    background-size: cover;
    background-position: center;
    /* Текст */
    color: #4a3828;
    font-size: 17px;
    font-weight: 400;
    font-family: 'EB Garamond', 'Georgia', serif;
    /* Сброс */
    border: none;
    border-radius: 0;
    padding: 0 0 4px 0;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    /* Центрирование */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    opacity: 1;
}

.m8b-container .m8b-ask-button.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.m8b-container .m8b-ask-button:hover {
    transform: translateY(-2px);
    box-shadow: none;
}

.m8b-container .m8b-ask-button:active {
    background-image: url('/wp-content/themes/gadanie-online/assets/images/knopka-1.webp');
    transform: translateY(2px);
}

/* Focus состояние */
.m8b-container .m8b-ask-button:focus {
    outline: none;
}

/* Лимит исчерпан — вместо поля и кнопки одна фраза */
.m8b-limit-message {
    display: none;
    padding: 4px 10px;
    font-family: 'EB Garamond', 'Georgia', serif;
    font-size: 20px;
    font-style: italic;
    line-height: 1.4;
    color: #4a3828;
}

.m8b-container.m8b-limited .rg-question,
.m8b-container.m8b-limited .m8b-ask-button {
    display: none;
}

.m8b-container.m8b-limited .m8b-limit-message {
    display: block;
}

/* Динамический блик */
.m8b-cursor-highlight {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at center, 
        rgba(255,255,255,0.3) 0%, 
        rgba(255,255,255,0.1) 40%, 
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 12;
    transition: opacity 0.3s ease, transform 0.1s ease-out;
    opacity: 0;
    filter: blur(2px);
}

.m8b-ball-container:hover .m8b-cursor-highlight {
    opacity: 1;
}

/* Тень от мыши */
.m8b-mouse-shadow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 280px;
    height: 40px;
    background: radial-gradient(ellipse at center, 
        rgba(0,0,0,0.3) 0%, 
        transparent 60%);
    transform: translateX(-50%);
    transition: transform 0.1s ease-out;
    z-index: -1;
}

/* Без подсветки нажатия на мобильных и без мерцания при анимациях — только у шара
   (раньше эти правила стояли на все элементы страницы) */
.m8b-container,
.m8b-container * {
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}