/* Шар предсказаний */
.magic-ball {
    position: relative;
    width: 400px; /* Размер шара */
    height: 400px;
    margin: 20px auto;
    border-radius: 50%;
    background: radial-gradient(circle, #000 60%, #222 100%);
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.9), 0 10px 20px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease; /* Плавный переход */
}

/* Эффект тряски */
.magic-ball.shake {
    animation: shake 0.5s ease-in-out; /* Анимация тряски */
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-10px, 0);
    }
    50% {
        transform: translate(10px, 0);
    }
    75% {
        transform: translate(-10px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* Внутренний блок внутри шара */
.magic-ball .plugin-container {
    position: absolute;
    width: 150px; /* Размер внутреннего блока */
    height: auto;
    background-color: #1a1a1a; /* Темный фон блока */
    border: 2px solid #0073aa; /* Синяя рамка */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 115, 170, 0.6);
    padding: 10px;
    text-align: center;
    color: #fff; /* Белый текст */
    font-size: 14px; /* Размер текста */
}

/* Основной текст */
.plugin-message {
    font-size: 14px;
    color: #00b4d8;
    font-weight: bold;
    margin-bottom: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
}

.plugin-message:active {
    transform: scale(0.95);
    color: #0073aa;
}

/* Ответы */
.plugin-answer {
    font-size: 12px;
    color: #00ffcc;
    margin-top: 5px;
    opacity: 0;
    transform: scale(0.8);
    animation: none;
}

.plugin-answer.visible {
    opacity: 1;
    transform: scale(1);
    animation: magic-appearance 1s ease-out forwards;
}

/* Анимация появления ответа */
@keyframes magic-appearance {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Стиль для звезд-фейерверков */
.star {
    position: absolute;
    width: 15px; /* Размер звезд */
    height: 15px;
    background-color: gold;
    border-radius: 50%;
    box-shadow: 0 0 15px gold, 0 0 25px orange;
    animation: explode 1.5s ease-out forwards;
}

/* Анимация звезд */
@keyframes explode {
    0% {
        opacity: 1;
        transform: scale(0.5) translate(0, 0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.5) translate(-10px, -10px);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translate(50px, 50px);
    }
}