/* ball.css（ボールスタイル）- テーマ変数対応版 */

#ball, .ball {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: transform 0.3s ease;
}

/* メインボールのスタイル */
#ball {
    background: radial-gradient(circle at 30% 30%, var(--ball-color), var(--accent-secondary));
    box-shadow: 0 0 8px var(--accent-secondary);
}

/* 追加ボールの基本スタイル */
.ball {
    background: radial-gradient(circle at 30% 30%, var(--ball-color), var(--powerup-multiball));
    box-shadow: 0 0 8px var(--powerup-multiball);
}

/* パワーアップ状態 */
#ball.power-up, .ball.power-up {
    background: radial-gradient(circle at 30% 30%, var(--ball-color), var(--accent-secondary));
    animation: ballGlow 0.5s ease-in-out infinite alternate;
}

@keyframes ballGlow {
    from {
        box-shadow: 0 0 10px var(--accent-secondary);
    }
    to {
        box-shadow: 0 0 20px var(--accent-secondary), 0 0 30px var(--accent-secondary);
    }
}

/* テーマ切り替え時のスムーズな遷移 */
#ball, .ball {
    transition: background 0.5s ease, box-shadow 0.5s ease;
}